如何在此代码上实现jQuery cookie

时间:2012-05-26 08:26:02

标签: javascript jquery cookies slidetoggle

我刚刚编写了这段代码,使用幻灯片使用按钮切换隐藏/显示的框:

jQuery("#button").click(function () {
    jQuery('#box').slideToggle('fast');
});

我想在此处实现cookie以记住盒子是隐藏还是可见。有人能引导我吗?

2 个答案:

答案 0 :(得分:3)

有一个jQuery Cookie插件可供使用,它可以更轻松,更方便地读取和写入cookie。这是一个例子:

// if the slider is visible, set the cookie slider value to true
$.cookie('slider', 'visible', { expires: 7, path: '/' });

要阅读该值,请使用以下示例:

var sliderVisible = $.cookie('slider');

可以在jQuery Cookies Plugin Site找到更多信息。

答案 1 :(得分:1)

我刚开始工作了。我做了两个按钮,每个状态都有不同的按钮(即关闭和打开)

jQuery('#button_open').hide(); //initially we keep the open button hidden

//此代码定义了单击关闭按钮时发生的事情

jQuery('#button_close').click(function () {
      jQuery(this).hide(); //this hides the close button as the box is now closed
      jQuery('#box').slideUp('fast'); //hides the box
      jQuery('#button_open').show(); //shows the open button
      jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
      return false;
    });

//此代码定义了单击打开按钮时发生的情况

jQuery("#button_open").click(function () {
      jQuery(this).hide(); //hides the open button as the box is now open
      jQuery('#box').slideDown('fast'); //shows the box
      jQuery('#button_close').show(); //shows the close button
      jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
      return false;
    });

//现在神奇的部分进来了。这段代码检查名为'openclose'的cookie是否具有值'closed'。如果是,它会隐藏关闭按钮+框并显示打开按钮。

    if(jQuery.cookie("openclose") == "closed") {
        jQuery("#button_close").hide();
        jQuery("#button_open").show();
        jQuery('#box').hide();
    };