使用jquery和cookie切换和保留状态_Jquery_Cookies_Toggle

使用jquery和cookie切换和保留状态

jquery cookies

使用jquery和cookie切换和保留状态,jquery,cookies,toggle,Jquery,Cookies,Toggle,我有两个div，它们通过jquery进行切换。我希望它们在页面重新加载时具有相同的状态，因此使用coockie。但不管发生什么，它都会卡在其中一个div上，这是因为我似乎无法设置正确的coockie。怎么了 <!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jqu

我有两个div，它们通过jquery进行切换。我希望它们在页面重新加载时具有相同的状态，因此使用coockie。但不管发生什么，它都会卡在其中一个div上，这是因为我似乎无法设置正确的coockie。怎么了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<style type="text/css">
body {
    margin: 80px;
}
.about {
}

.nav {
display: none;
}
</style>
<title></title>
</head>
<body>
<div class="about">
This is the about text
</div>
<div class="nav" >
This is the nav text
</div>
<script type="text/javascript" >
    jQuery(document).ready(function($) {

        //check cookie when page loads
        if (jQuery.cookie("visible") === "nav") {
            jQuery(".nav").css({ display: "block" });
            jQuery(".about").css({ display: "none" });
        }

        jQuery("#knapp").click(function () {
            jQuery(".about").toggle(10);
            jQuery(".nav").toggle(10);

            if(jQuery(".nav").css("display")  === "block") {
                jQuery.cookie("visible", "nav");
            }
            else {
                jQuery.cookie("visible", "about");
            }

        //return false; //Prevent browser jump to the link anchor

        });
            });
</script>
<div id="about-nav toggle">
<a href="#" id="knapp">Nav toggle</a>
</div>

</body>
</html>


身体{
利润率：80px；
}
.关于{
}
.导航{
显示：无；
}
这是关于文本的
这是导航文本
jQuery（文档）.ready（函数（$）{
//页面加载时检查cookie
if（jQuery.cookie（“可见”）=“导航”）{
jQuery（“.nav”）.css（{display:“block”}）；
jQuery（“.about”）.css（{display:“none”}）；
}
jQuery（“#knapp”）。单击（函数（）{
jQuery（“.about”）.toggle（10）；
jQuery（“.nav”）。切换（10）；
if（jQuery（“.nav”）.css（“显示”）=“块”）{
cookie（“可见”、“导航”）；
}
否则{
cookie（“可见”、“关于”）；
}
//返回false；//防止浏览器跳转到链接定位点
});
});

这家伙：

jQuery(".nav").css("display")

似乎总是返回“阻塞”。。也许最好使用一个显式变量来跟踪状态：

$(document).ready(function($) {
    var isAbout = true;
    if ($.cookie("visible") === "nav") {
        // ...
        isAbout = false;
    }

    $("#knapp").click(function () {
        // ...
        isAbout = !isAbout;
        $.cookie("visible", isAbout ? "about" : "nav");
    });
 });

好的，谢谢，我试试看。但是为什么那个“家伙”总是回街区呢？不确定。。切换动画的第一步可能会立即发生，因此在检查属性时，两个div都是可见的。将“切换时间”设置为零将解决此问题。谢谢你的提示！那么，在切换之后，jquery中是否有一个类似等待的函数可以设置？setTimeout（function（）{//set cookies}，20）；