Question

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

html

 <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');
            }
        });
});

CSS

.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;
}

Answer 1

一旦刷新页面，所有javascript / dom将重新加载，它将恢复到原始状态，因此页面无法记录您之前的状态。

2推荐：

使用像java / php / asp这样的动态程序语言来记录这种状态。
在您的特定页面中添加标记。就像我最近使用的代码一样。

HTML代码

菜单HTML：

<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>

特定页面异化（您可以使用<input type="hidden" id="identifier" value=""/>），我们将其定义为：

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

Javascript代码：

$(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');
    }
});

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

如何在Collapse Jquery中维护状态

1 个答案: