0

我正在使用此脚本来存储有关展开和折叠菜单级别的信息：

    $('#menu li:has(ul) a').click(function() {
$(this).next().toggle();
if ($(this).next().is(':visible')) {
    $.cookie($(this).text(), 'expanded');
}

if ($(this).next().is(':hidden')) {
    $.cookie($(this).text(), 'collapsed');
}
});


$('.item').each(function() {
    var verticalNav = $.cookie( $(this).children('a').text() );
    if (verticalNav == 'expanded') {
        $(this).find('ul').show();
    }
});

适用于 2 级菜单。例如：

<ul>
<li>item 1
    <li>item 1.1</li>
</li>

但是当我把第三层：

<ul>
<li>item 1
    <li>item 1.1
        <li>item 1.1.1</li>
    </li>
</li>

如果我只在第 2 级单击，当页面刷新时，会显示第 3 级。

4

1 回答 1

1

请注意，您当前的解决方案仅存储最后单击的项目，而不是完整列表。

我建议在每个项目上放置 id，然后为展开的项目存储一个 id 数组。然后，在页面加载时，折叠所有内容，然后展开数组中的项目。或者存储折叠的项目并从展开的所有内容开始，以适合您的设计。当您获得更多项目时，遍历所有项目并每次比较文本会变得更慢。

我在jsfiddle上放了一个小样本。

我有点过火了，并创建了一个对象来跟踪哪些项目被展开。我也在使用store.js而不是 cookie；这是个人喜好。要将其更改为使用 cookie，只需将“store.get”或“store.set”替换为“$.cookie”即可。

于 2012-08-29T20:06:02.460 回答