javascript - 使用 Jquery 烘焙 cookie

Question

有人可以告诉我为什么这不起作用:

$(document).ready(function() {
    $("#cookie").text("expanded");
    //panel toggle
    $(".btn-slide").click(function() {
        $("#panel").slideToggle("slow");
        //set the name and value of the cookie
        $.cookie('panel', 'collapsed');
        $("#cookie").text("collapsed");
    }, function() {
        $("#panel").slideDown("slow");
        //set the name and value of the cookie
        $.cookie('panel', 'expanded');
        $("#cookie").text("expanded");
    });
    // cookie
    var panel = $.cookie('panel');
    // Set the user's selection for the state
    if (panel == 'collapsed') {
        $("#panel").hide();
    };
});

jsFiddle Example

我没有看到任何错误，但刷新时面板不会保持其状态(无论是打开还是关闭)。它只是返回到关闭的默认状态。我正在使用 cookie 插件。

Answer 1

插件行为按预期工作。问题是你误解了click()事件有效。

您已经给了它两个函数参数，假设它们将被交替调用来设置 cookie 值。由于只调用了第二个方法，因此您的状态将始终扩展。

此外，您还使用 CSS 在面板上设置了 display: none;，这意味着即使设置了正确的状态，它也不会展开。因为在你的JS中，你只检查它是否折叠并隐藏它。

解决这些问题后，它会按预期工作。这是更新后的代码。

$(document).ready(function() {
    $("#cookie").text("expanded");

    $(".btn-slide").click(function() {
        $("#panel").slideToggle("slow");
        var state = ($.cookie('panel') != 'collapsed') ? 'collapsed' : 'expanded';
        $.cookie('panel', state);
        $("#cookie").text("collapsed");
    });

    var panel = $.cookie('panel');

    if (!panel) {
        $.cookie('panel', 'expanded');
    }

    if (panel == 'collapsed') {
        $("#panel").hide();
    } else {
        $("#panel").slideDown();
    };
});

这是 fiddle :http://jsfiddle.net/RJMhT/157/

请记住，我没有设置默认值，因此对于初始加载，它将展开。一旦你真正改变了状态，它就会记住它。