如何设置用于使用jquery切换div的cookie

时间:2012-07-31 07:44:17

标签: jquery html css3

div切换有点问题。在我的页面中,我有两个主要的div,一个是box,另一个是box2。

当用户首先打开我的页面时,只有框可见,但当他/她点击box2时,它会向下滑动并显示。

用户切换box2后,在页面重新加载该div必须打开,但我不知道如何为此设置cookie。

请点击此处(http://jsfiddle.net/wasimkazi/fauNg/18/)

function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == c_name) {
        return unescape(y);
      }
   }
}

function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}

var widget2 = $(".widget2"),
box2 = $(".box2");

widget2.hide();
box2.click(function() {
$(this).next(widget2).slideToggle("fast", function() {});
});

var inner = $(".inner"),
box = $(".box");

inner.hide();
box.click(function() {
$(this).next(inner).slideToggle("fast", function() {
  });
});

1 个答案:

答案 0 :(得分:1)

你可以使用这样的东西来存储盒子的状态,然后使用getcookie检查页面重新加载的状态,然后相应地切换它

box2.click(function() {
    $(this).next(widget2).slideToggle("fast", function() {
        var flag = ($(this).css("display") == 'none')?'off':'on';
        setCookie('box2', flag);
    });
});

然后在页面重新加载检查框的状态/值,然后相应地切换。

之类的东西
if(getCookie('box2') == 'on'){
    box2.show();
}else{
    box2.hide();
}

不是确切的解决方案,但jus给你一些方法,你将能够处理它

如果您对setcookie和getcookie是否正确有疑问,可以参考link on quirksmode来简单实现Cookie