我有 2 个用 jquery 切换的 div。我希望它们在页面重新加载时具有相同的状态，因此使用 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>
这家伙：
jQuery(".nav").css("display")
似乎总是返回“block”..也许使用一个显式变量来跟踪状态是一个更好的主意：
$(document).ready(function($) {
var isAbout = true;
if ($.cookie("visible") === "nav") {
// ...
isAbout = false;
}
$("#knapp").click(function () {
// ...
isAbout = !isAbout;
$.cookie("visible", isAbout ? "about" : "nav");
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
