为 div 状态设置 cookie (javascript)

Question

我有一个函数可以控制两个 div（collapse 和 collapse1）。如果一个设置为 style:block，另一个是 style:none。默认样式是 <div id="collapse1" style="display:none;"> 和 <div id="collapse" style="display:block;"> 这也总是在刷新或页面加载时重新调用。

函数如下：

$(function () {
    $('.nav-toggle').click(function () {
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function () {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show'); //change the button label to be 'Show'
                document.getElementById('collapse').style.display = "block";
            } else {
                toggle_switch.html('Hide'); //change the button label to be 'Hide'
                document.getElementById('collapse').style.display = "none";
            }
        });
    });
});

那么，我该如何设置这个功能的 cookie，以便在页面刷新时，div 样式保持选中状态，而不是默认设置？

感谢您的帮助！

Answer 1

我推荐你看看jQuery.Cookie，有了这个jQuery插件你可以轻松设置cookies。

只需一行代码即可设置 Cookie：$.cookie('the_cookie', 'the_value');。
请注意，这只会为会话设置 cookie，您还可以像这样设置 cookie 到期日期：$.cookie('the_cookie', 'the_value', { expires: 30 });（“到期”以天为单位设置）。

要读取 cookie 的值，您可以这样做：$.cookie('the_cookie');，如果 cookie 不存在，它将返回“undefined”。

希望这对您有所帮助，如果这对您有用，请告诉我 ;)！