使用 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 示例

我没有看到任何错误，但在刷新时面板不保持其状态（无论是打开还是关闭）。它只是返回到关闭的默认状态。我正在使用 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();
    };
});

这是小提琴： http://jsfiddle.net/RJMhT/157/

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

Answer 2

你好！

对我来说这个问题很清楚！

工作示例：

$(document).ready(function() {

    // default:
    $("#panel").hide();
    $('#cookie').text('collapsed');

    // if cookie exist:
    if ($.cookie('panel') == 'open') {
        $('#panel').show();
        $('.slide').addClass('expanded');
        $('#cookie').text('expanded');
    }

    $(".slide").click(function() {
        $(this).toggleClass('expanded'); // toggle class
        if ($(this).hasClass('expanded')) { // now we check what happend:
            $.cookie('panel', 'open', {expires: 1} ); //create cookie if .expanded is added to button
            $('#cookie').text('expanded');
        }
        else {
            $.cookie('panel', null, {expires: 1} ); // else: delete cookie
            $('#cookie').text('collapsed');
        };
        $(this).prev('#panel').slideToggle(800);
    });
});

这是一个 JSFiddle 演示