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值。由于只调用了第二种方法，因此您的状态始终为expanded。

此外，您已使用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

HI！

对我来说问题非常明确！

工作前：

$(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 DEMO

用Jquery烘烤一个cookie

2 个答案: