请记住在刷新后使用 jQuery 切换状态

Remember Toggle state with jQuery after refresh?

本文关键字：jQuery 状态 刷新      更新时间：2023-09-26

我有一个小脚本来切换我的导航。但是我在更多页面中使用了导航。我希望jQuery记住切换（显示/隐藏）状态，以便在导航时使用它。

$(document).ready(function(){
$('ul.second').show();
$('ul.third').hide();
$('ul.first').show();
$('ul.first li.first a').click(function(){
    //$('ul.second').slideToggle("");
    $('ul.third').slideToggle("");
    });
});

您可以使用 Cookie 管理或本地存储来在整个会话中存储此信息。不过，LocalStorage 仅适用于 html5。

这是一篇关于同时具有这两种功能的插件的好文章，因此您无需检测浏览器是否能够进行本地存储：

http://upstatement.com/blog/2012/01/jquery-local-storage-done-right-and-easy/

您还可以向 url 添加哈希，并在页面刷新后检测哈希。

有关哈希的更多详细信息，请单击此处

http://benalman.com/projects/jquery-hashchange-plugin/

https://developer.mozilla.org/en/DOM/window.onhashchange

你可以

用jquery的滑动功能来做到这一点只需像这样使用 CSS 设计面板并根据您的喜好翻转元素

<style>
.flip {
position:relative;
background-image:url("mybutton");
}
#panel {
background-image:("rabbitimage");
}
</style>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $(".flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

</head>
<body>
<div class="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
相关文章：