JQuery - 记得用Cookie切换状态

Question

我有以下JQuery切换页面上的标题.如何使用JQuery Cookie记住切换状态？

$(document).ready(function() {
    $('#btnToggleHeader').click(function() {
    $('#Header').slideToggle('slow');
    });
});

非常感谢你!

Answer 1

关于javascript和cookie的一个很好的资源是http://www.w3schools.com/JS/js_cookies.asp.

基于这个网站,我们有3个功能:setCookie,getCookie和checkCookie(它给我们演示了如何使用其他两个.)

要设置切换的初始状态,这样的工作原理:

$(document).ready(function(){
// The initial load event will try and pull the cookie to see if the toggle is "open"
var openToggle = getCookie("open") || false;
if ( openToggle )
    $("#Header").show();
else
    $("#Header").hide();

// The click handler will decide whether the toggle should "show"/"hide" and set the cookie.
$('#btnToggleHeader').click(function() {
    var closed = $("#Header").is(":hidden");
    if ( closed )
       $("#Header").show();
    else
        $("#Header").hide();
    setCookie("open", !closed, 365 );
});

});

注意:这只是一个参考,我没时间测试.希望它有所帮助.