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

【问题标题】：Toggle and preserve state with jquery and cookies使用 jquery 和 cookie 切换和保留状态
【发布时间】：2011-05-25 20:55:56
【问题描述】：

我有 2 个用 jquery 切换的 div。我希望它们在页面重新加载时具有相同的状态，因此使用 cookie。但无论如何它都会卡在其中一个 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>

【问题讨论】：

标签： jquery cookies toggle

【解决方案1】：

这个人：

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(){ //设置cookies },20);