Javascript 使用Jquery烘焙cookie

有人能告诉我为什么这样不行吗：

$(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();
    };
});

---

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

插件行为按预期工作。问题是你误解了活动的运作方式

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

此外，您还设置了

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();
    };
});

这是小提琴：

请记住，我没有设置默认值，因此对于初始加载，它将被扩展。一旦你改变了状态，它就会记住
 插件行为按预期工作。问题是你误解了活动的运作方式

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

此外，您还设置了
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();
    };
});

这是小提琴：

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

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

工作人员：

$(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);
    });
});

这是一个
嗨

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

工作人员：

$(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);
    });
});

这里有一个
你可能想提到你正在使用一个插件。你也应该在这里发布代码。也许通过做一个简单的if/else块来将问题分解为各个部分。我没有做所有这些，因为我认为问题并不复杂，一看就知道问题在各个角度都很明显。而且我认为在各个方面提供一个到JSFIDLE的链接都要有效得多。作为一名科学家，我一直在寻找透明和清晰的方法，这意味着我必须简化。做你建议的事情只会使我的问题复杂化。但是我同意我应该提到plugin.yomoore，@JohnP试图通过建议改进问题的方法来帮助你，从而获得更好的答案。我投票反对这个问题是为了回答一个糟糕的问题，以及你对改进建议的漠视。此外，最后，如果没有指向该插件的链接，告诉我们有一个“涉及jQuery插件”是没有帮助的。我想说“仅链接”的问题是同一条船。@yomoore:JSFIDLE不是网络上最健壮的站点。它经常出现停机和停机。如果有人点击了你的链接却看不到页面，那可能会有点令人沮丧。另外，关于堆栈溢出的问题应该能够独立解决，而不依赖于外部源，如pastebin或JSFIDLE。你也应该在这里发布代码。也许通过做一个简单的if/else块来将问题分解为各个部分。我没有做所有这些，因为我认为问题并不复杂，一看就知道问题在各个角度都很明显。而且我认为在各个方面提供一个到JSFIDLE的链接都要有效得多。作为一名科学家，我一直在寻找透明和清晰的方法，这意味着我必须简化。做你建议的事情只会使我的问题复杂化。但是我同意我应该提到plugin.yomoore，@JohnP试图通过建议改进问题的方法来帮助你，从而获得更好的答案。我投票反对这个问题是为了回答一个糟糕的问题，以及你对改进建议的漠视。此外，最后，如果没有指向该插件的链接，告诉我们有一个“涉及jQuery插件”是没有帮助的。我想说“仅链接”的问题是同一条船。@yomoore:JSFIDLE不是网络上最健壮的站点。它经常出现停机和停机。如果有人点击了你的链接却看不到页面，那可能会有点令人沮丧。另外，关于堆栈溢出的问题应该能够独立解决，而不依赖于外部资源，如pastebin或JSFIDLE。如果你觉得我是个聪明人，只是我从来没有投过反对票，那感觉就像是一种侮辱，当然不是。将来，在我发布问题之前，我会三思而后行。非常感谢。@yomoore不客气：）不要亲自记录选票，通常这表明有些事情需要解决，所以最好听听人们在说什么。如果问题得到改善/修正，大多数人都会取消他们的反对票。这就是为什么我对@yomoore的问题投了更高的票。我不知道为什么有人只是投了反对票，而没有留下评论并给机会重新编辑问题。这不是生产，只是士气低落。问题的答案很清楚，但一开始问题的答案并不是很清楚。在我们到达这里之前，我们进行了一些编辑迭代。但是，是的，DVs通常应该在问题更新后进行审查。那么我能说什么…：）非常感谢您的时间和努力。如果你觉得我是个聪明人，只是我从来没有投过反对票，那感觉就像是一种侮辱，当然不是。将来，在我发布问题之前，我会三思而后行