Javascript JQuery-嵌套的ul/li列表，在重新加载页面后保持展开状态_Javascript_Jquery_Html

Javascript JQuery-嵌套的ul/li列表，在重新加载页面后保持展开状态

javascript jquery html

Javascript JQuery-嵌套的ul/li列表，在重新加载页面后保持展开状态,javascript,jquery,html,Javascript,Jquery,Html,我有一个嵌套的ul/li列表 <ul> <li>first</li> <li>second <ul> <li>Third</li> </ul> </li> ... and so on 首先第二第三 ... 等等我在interweb上找到了这个JQuery作为灵感，但是如何在页面重新加载后保持我扩展的一个项目处于打开状态呢 <script type="text/jav

我有一个嵌套的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>


$（文档）.ready（函数（）{
$（'div#sideNav li>ul'）.hide（）；//隐藏所有嵌套的ul
$（'div#sideNav li>ul li a[class=current]）.parents（'ul'）.show（）.prev（'a'）.addClass（'accordioexpanded'）；//如果ul中有当前链接，则显示ul（当前页面/部分应展开显示）
$（'div#sideNav li:has（ul））.addClass（'accordion'）；//因此我们可以设置加号/减号图标的样式
$（'div#sideNav li:has（ul）>a'）。单击（函数（）{
$（this）.toggleClass（'accordioexpanded'）；//用于CSS bgimage，但仅在第一个a上（子li>a不需要该类）
$（this）.next（'ul'）.slideToggle（'fast'）；
$（this）.parent（）.sides（'li'）。children（'ul:visible'）。slideUp（'fast'））
.parent（'li'）.find（'a'）.removeClass（'accordioexpanded'）；
返回true；
});
});

仅在JavaScript中不容易做到这一点

当页面被重新加载（直接加载到源HTML中）时，服务器可以正确设置
```
accordioexpanded
```
CSS类。这就要求服务器知道用户点击了什么
或者完全避免重新加载页面，通过AJAX调用进行部分页面更新。这就是大多数“现代”网站所做的
或者按照Glennular的建议将州信息保存到cookie中

您的选择。

您可以将当前打开的菜单项保存在cookie

$中。cookie（'menustate'）

类似：

我不确定您的菜单到底应该做什么，但如果它是导航菜单，您可以为每个基本页的

正文

元素添加一点简短的标记：

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

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

在页面之间传递数据时管理状态的方法相同：

质询
饼干
表单发布/隐藏字段
与服务器之间的Ajax

我假设您不喜欢前面的任何答案，因为没有一个答案被接受，并且为您提供了一种不太“正确”的方式。在我被烧死之前，这只是我用纯js/jq做的尝试。您可以解析出URL（）并选择任何相关的部分（为了方便起见，假设/subsite是您想要的）

将您的ID构建到类似于

的内容中，并使用解析出的URL为正确的选项卡/li/构建选择器。奇怪吗？当然可以，但是我想我应该把$0.02扔进去，忘了cookie选项。这不是一个很好的选项，真的，特别是如果启用cookie对浏览网站至关重要的话。现在情况不是这样了，但出于各种原因，人们对饼干的认识仍然很粗略。

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