Javascript 如何在折叠Jquery中维护状态

我的侧栏可折叠菜单有问题。当用户单击菜单上的子链接时，页面将刷新并丢失所选子项目链接和父链接项目侧导航栏的突出显示，并将其重置。我试图做的是维护侧栏可折叠子项目的状态，并在所有页面刷新时突出显示

html

---

刷新页面后，所有javascript/dom将再次重新加载，它将恢复到原始状态，因此页面无法记录您以前的状态

2建议：

使用java/php/asp等动态程序语言记录此状态

在特定页面中添加标志。下面是我最近使用的代码

HTML代码

菜单HTML：

---

您可以参考这些想法的详细信息。

选项包括解析url、存储cookie、存储本地存储。Javascript不维护页面更改时的状态

 <link href="StyleSheet1.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="JavaScript1.js"></script>
    <div class="menu_div">
        <ul id="active">
            <li id="active">
                <a href="#">Test 1</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </li>
            <li id="active">
                <a href="#">Test 2 </a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
            </li>
        </ul>
    </div>
Jq


 $(document).ready(function () {
        $('#active li ul').hide();
        $('#active > li > a').click(function () {
            if ($(this).attr('class') != 'active') {
                $('#active li ul').slideUp();
                $(this).next().slideToggle();
                $('#active li a').removeClass('active');
                $(this).addClass('active');
            }
        });
});

.menu_div ul
{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#FFF;
    list-style:none;
    text-indent:15px;
}
.menu_div ul li
{
    background:#3f3f3f;
    line-height:28px;
        border-bottom:1px solid #333;
}
.menu_div ul li a
{
    text-decoration:none;
    color:#FFF;
    display:block;
}
.menu_div ul li a:hover
{
    background:#ff850d;
}
.menu_div ul li#active
{
    background:#ff850d;
}

<ul class="home">
    <li class="item1"><a href="">item 001</a></li>
    <li class="item2"><a href="">item 002</a></li>
    <li class="item3"><a href="">item 003</a></li>
</ul>
<ul class="java">
    <li class="java_item1"><a href="">java_item 001</a></li>
    <li class="java_item2"><a href="">java_item 002</a></li>
</ul>

<!-- which means it's the home page and the item1 li -->
<input type="hidden" id="identifier" value="home:item1"/>

$(document).ready(function() {
    // TODO: you can remove all the active class from your menu nodes.

    var identifier = $('#identifier').val();
    if(identifier && identifier.indexOf(':') > -1) {
        // means this should be handle the menu state
        var specificItems = identifier.split(':'); // [0] means the ul identifier, [1] means the li identifier
        $('.' + specificItems[0]).addClass('active').find('.' + specificItems[1]).addClass('.active');
    }
});