jQuery cookie 记住哪个导航列表是打开的？答案

【问题标题】：jQuery cookie to remember which nav list is open?jQuery cookie 记住哪个导航列表是打开的？
【发布时间】：2012-01-10 08:07:24
【问题描述】：

我用我（非常）简陋的 jQuery hackish 方式拼凑了以下内容：

$(".toggle_container").hide();
                $(".trigger a").addClass("close");
                $(".trigger a").click(function() {
                $(".toggle_container").slideUp('200','swing');
                 $(".trigger a").removeClass("open").addClass("close");
                    if     ($(this).next(".toggle_container").is(":hidden")) {
                            $(this).next(".toggle_container").stop(true,false).slideToggle('200','swing');

                        }
                });

jsfiddle 在这里：http://jsfiddle.net/FWzWu/8/

我从未使用过 jquery cookie 插件，但现在想用它来记住页面之间的用户菜单状态。在此处使用 github 插件：https://github.com/carhartl/jquery-cookie

非常感谢任何帮助！谢谢！

【问题讨论】：

老实说，我不知道将 cookie 设置为什么以及如何将其与我目前所拥有的相结合。
或者怎么做才能读回它并为此设置导航。
PHP 中的sessions 不是更好的选择吗？如果您在没有页面重新加载的情况下使用 jquery 做事，那么您可以使用 AJAX 来更新会话变量。当用户离开页面时，您将失去菜单状态，但如果您只在页面之间使用它，那么我会使用会话。
我在这个 SASS 托管环境中。没有分体式。 ://

标签： jquery menu jquery-cookie

【解决方案1】：

A first stab（我添加了对 event.preventDefault() 的调用以阻止默认锚点操作在点击时发生 - 您可能需要删除它）。

它可以做一些清理工作，例如利用事件委托来捕获锚元素上的点击事件会很好，希望它能传达如何使用插件以及在哪里使用它。

 $(function () {   

    // give each container a unique class
    var containers = $("ul.toggle_container").hide().each(function (i,v) {
        $(this).addClass('container_' + i);       
    });

    var value = $.cookie('toggled_container');     

    // if we have a value in the cookie, use it to show that container
    if (value) {
        $('ul.' + value).show();
    }

    var anchors = $("li.trigger a");

    anchors.addClass("close").click(function() {
        containers.slideUp('200','swing');
        anchors.removeClass("open").addClass("close");
        var nextContainer = $(this).next("ul.toggle_container");
        if (nextContainer.is(":hidden")) {
            // capture the unique class that we have given the container
            $.cookie('toggled_container', nextContainer.attr('class').match(/container_\d+/));
            nextContainer.stop(true,false).slideToggle('200','swing');
        }
    });
});

显然，此解决方案假定您的容器的数量和顺序永远不会改变；如果他们这样做了，错误的容器最终会在页面加载时被扩展:)

【讨论】：

谢谢拉斯！是否可以使用不显示或类似的通用“隐藏”类来完成相同的方法？还是因为 cookie 的设置，我们必须有唯一性？
@Jamie 理想情况下，我们希望打开容器的唯一标识符，因为这将是在 DOM 准备好时找到正确容器并在 cookie 中存储值的最快（也是最简单）的方法当容器打开时。现在我们可以通过 DOM 中的序数位置来获取它，但是我们真的不想在每次存储值时都计算它，所以我们在 DOM 准备好时有效地计算唯一标识符，并在页面仍然存在时使用它们加载。如果是我，我可能会在服务器发送的标记中的容器上有 id
感谢您的帮助拉斯。非常感谢您抽出宝贵的时间。

【解决方案2】：

在您列出的页面（github 页面）上有一个readme，我从未使用过该插件，但它看起来很简单。

确保包含脚本；

<script src="/path/to/jquery.cookie.js"></script>

现在每次您想更改 cookie 值（或首先创建 cookie）时使用；

$.cookie('cookie_name', 'cookie_value', { expires: 7 });

将 *cookie_name* 和 *cookie_value* 更改为您想要的任何内容。例如

$.cookie('nav_choice', '1', { expires: 7 });

然后每次加载页面时在 document.ready 中运行这个；

var nav = $.cookie('nav_choice');

然后您可以运行 if() 语句来确定要显示的内容。

这有帮助吗？如有必要，我可以详细说明。

【讨论】：

我更新了 jsfiddle，可能把它搞砸了。