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");
  });
});