1

我正在开发一个控制面板，它有一个左栏菜单，其中包含使用 JavaScript(jQuery)、HTML 和 Cookie 的可折叠部分。请参阅图片了解简要想法。

在图像中，您可以看到Account Information菜单已展开/打开/可见。

Server Admin, Database Management, Domain Management, Mail, 和several others未在图像中显示为折叠/关闭/隐藏

菜单图片

目前，我为每个菜单部分存储一个 cookie，告诉它是否折叠。如果有 10 个菜单部分，即在每次页面加载时读取 10 个 Cookie（n X 菜单部分）。

所以我的问题是，如果在我的控制面板中有 20-30 个 cookie 保存此信息，最好将它们存储为 1 个 cookie，然后将每个菜单的值存储在这个 cookie 中，可能是 JSON 字符串或其他存储在cookie中的格式？

很想听听比我现在更好的方法。它现在有效，但感觉不对。

请帮忙，我绝不是 Javascript 专家，我还在学习 JS，我的背景更多的是 PHP。

到目前为止，这是我的代码...

// jQuery Cookie plugin is not shown but is also used.


$(document).ready(function() {

    // Handle the menu state based on Click events
    $('#menu-sidebar li:has(ul) .heading').click(function() {
        $(this).next().toggle();
        if ($(this).next().is(':visible')) {
            $.cookie($(this).text().replace(/\+|-|\s/g,''), 'expanded');

            $(this).children('.open').text('-');
        }

        if ($(this).next().is(':hidden')) {
            $.cookie($(this).text().replace(/\+|-|\s/g,''), 'collapsed');

            $(this).children('.open').text('+');
        }
    });

    // Handle the Menu state based on current Cookie values
    $('#menu-sidebar > li').each(function() {
        var cookieName = $(this).children('.heading').text().replace(/\+|-|\s/g,'')
        var verticalNav = $.cookie( cookieName );

        if (verticalNav == 'expanded') {
            $(this).find('ul').show();
            $(this).find('.open').text('-');
        }
    });

});

我已经在 J​​SFiddle 页面上添加了所有的 JavaScript 和 HTML + CSS，以便在这里查看它的运行情况...... http://jsfiddle.net/jasondavis/mvucU/

4

1 回答 1

2

由于这是一个纯 javascript 实现，您应该使用 localstorage http://diveintohtml5.info/storage.html

由于值不会随每个请求一起发送（如使用 cookie），因此您可以选择使用单个或多个条目。如果你想使用最少的条目，你可以使用 json，例如使用这个插件https://code.google.com/p/jquery-json/

于 2013-02-23T01:00:45.570 回答