jQuery cookie要记住哪个导航列表是打开的?

时间:2012-01-09 22:43:37

标签: jquery menu jquery-cookie

我用以下(非常)简陋的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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

显然,这个解决方案假设您的容器永远不会改变数量和顺序;如果他们这样做,错误的容器将最终在页面加载时扩展:)

答案 1 :(得分:0)

在你列出的页面上(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()语句来确定要显示的内容。

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