Question

我有一个控制两个div的功能（折叠和折叠1）。如果一个设置为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插件可以轻松设置Cookie。

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

要阅读Cookie的值，您可以执行以下操作：$.cookie('the_cookie');，如果Cookie不存在，则会返回“ undefined ”。

希望这可以帮助你在路上，让我知道这是否适合你;）！

设置div状态的cookie（javascript）

1 个答案: