Question

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

    $('#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级。

Answer 1

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

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

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

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

用于3级可折叠jQuery菜单的Cookie

1 个答案: