Jquery cookie - 切换框

Question

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

当我点击#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"); 
    }); 
});