Question

我有一个嵌套的ul / li列表

<ul>
<li>first</li>
<li>second
<ul>
<li>Third</li>
</ul>
</li>
... and so on

我在interweb上发现这个JQuery用作灵感，但是如何在页面重新加载后保持一个项目展开？

<script type="text/javascript">
        $(document).ready(function() {
            $('div#sideNav li li > ul').hide();    //hide all nested ul's
            $('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded');  //show the ul if it has a current link in it (current page/section should be shown expanded)
            $('div#sideNav li:has(ul)').addClass('accordion');  //so we can style plus/minus icons
            $('div#sideNav li:has(ul) > a').click(function() {
                $(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
                $(this).next('ul').slideToggle('fast');
                $(this).parent().siblings('li').children('ul:visible').slideUp('fast')
                .parent('li').find('a').removeClass('accordionExpanded');
                return true;
            });
        });
    </script>

Answer 1

您可以将当前打开的菜单项保存在Cookie $.cookie('menustate')

中

类似：How to remember last state with Jquery?

Answer 2

与从页面到页面传递数据时管理状态的方式相同：

查询字符串
缓存
表格发布/隐藏字段
进出服务器的Ajax

Answer 3

我会假设您不喜欢以前的任何答案，因为它们都没有被接受，并以较少“正确”的方式呈现给您。在我被烧死之前，这只是我用纯js / jq做的尝试。您可以解析URL（http://example/subsite）并选择相关的任何部分（为了方便起见，假设/子网站是您想要的）。

    $(document).ready(function(){  
    var pathname = window.location.pathname;  
    var splitpath = pathname.split("/");        
    $("#nav-" + splitpath[1] + "").children().class('current')
});

将您的ID构建为类似<li id=nav-subsite>的内容，并使用解析后的URL为正确的tab / li / what构建选择器。这很奇怪吗？当然，但我想我会投入我的$ .02

Answer 4

仅在JavaScript中这不容易实现。

当重新加载页面时，服务器正确设置accordionExpanded CSS类（直接进入源HTML）。这将要求服务器自然地知道用户点击了什么<li>。
或者您完全避免重新加载页面并通过AJAX调用进行部分页面更新。这就是大多数“现代”网站所做的事情。
或者您执行Glennular建议并将状态信息保存到cookie中。

您的选择。

Answer 5

我不确定你的菜单应该做什么，但是如果它是一个导航菜单，你可以为每个基页的body元素添加一个简短的标记：

<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->

让jQuery查找此标记，并在页面加载后根据页面加载来决定如何处理列表树。它不需要设置任何cookie，只要它们启用了JS（每个用户都应该在这一点上），一切都是kosh magosh。

JQuery - 嵌套的ul / li列表，在重新加载页面后继续扩展

5 个答案: