Jquery cookie - 切换框

Question

我需要记住点击框的状态（如果显示或隐藏）。我正在为此使用 cookie 插件。

当我点击#clickable h3 时，我想隐藏或显示#clickable p...并且我需要在F5 之后保持隐藏/显示（这样它会记住它的状态）。

在初始加载时，该框必须隐藏，但如果没有 Javascript 存在，它将始终显示。
这是我的代码：

$(document).ready(function(){
    /* On load show/hide box depending on cookie */
    if($.cookie('click_cookie') == true){
        $.cookie('click_cookie', true);
        $("#clickable p").show();
    } else {
        $.cookie('click_cookie', false);
        $("#clickable p").hide();
    }

    /* When clicked */
    $("#clickable h3").click(function(){
        /* Animate box */
        $("#clickable p").animate({
            height: "toggle",
            opacity: "toggle"
        })
        /* Toggle cookie */
        if($.cookie('click_cookie') == true){
            $.cookie('click_cookie', false);
        } else {
            $.cookie('click_cookie', true);
        }
    });
});

问题在于它没有按预期工作。 F5 后该框始终隐藏。 $.cookie('click_cookie') == true 永远不会计算，所以它会一直隐藏。

Answer 1

试试这个。 $.cookie 返回并设置字符串：

$(function(){
  /* On load show/hide box depending on cookie */
  $("#clickable p").toggle($.cookie('click_cookie') == "true");

  /* When clicked */
  $("#clickable h3").click(function(){
    /* Animate box */
    $("#clickable p").animate({
        height: "toggle",
        opacity: "toggle"
    })
    /* Toggle cookie */
    var show = $.cookie('click_cookie') =="true"; // also false if no cookie at all
    $.cookie('click_cookie',show?"false":"true");
  });
});