javascript - 如何在此代码上实现 jQuery cookie

Question

我刚刚编写了这段代码，以使用幻灯片将框切换为使用按钮隐藏/显示：

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

我想在此实现 cookie 以记住该框是隐藏的还是可见的。有人可以指导我吗？

Answer 1

有一个可用的 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 插件站点上找到。

Answer 2

我刚刚开始工作。我做了两个按钮，这样每个状态都有不同的按钮（即关闭和打开）

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是否具有'close'值。如果是，它会隐藏关闭按钮 + 框并显示打开按钮。

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