Question

我遇到了问题，无法找到解决方案。我在jquery中制作手风琴菜单，并希望菜单的第二级一次打开一个。

并希望在网站上使用此任何帮助，以便在页面重新加载时如何保持打开状态。

如果不可读，我第一次问对不起。

希望任何人都可以提供帮助。

我是这种东西的菜鸟。

<style type="text/css">

* {
    margin: 0;
    paddding: 0;    
}

html, body {
    height: 100%;
    width: 100%;    
}

a:link {
    text-decoration:none;
    color: #000;
}

a:active {
    text-decoration:none;
    color: #000;
}

a:visitied {
    text-decoration:none;
    color: #000;    
}

a:hover {
    text-decoration:none;
    color: #CCC;
}


#menu-wrapper {

}

#menu-wrapper ul.slide-list li {
    list-style-type: none;  
}

#menu-wrapper ul.slide-list li a.selected {
    color: #F00;    
}

#menu-wrapper ul.slide-list li ul {
    display: none;  
}

#menu-wrapper ul.slide-list li ul li ul {
    display: none;  
}

</style>

</head>

<body>
<div id="menu-wrapper">

<ul class="slide-list">
    <li>
        <a href="javascript:void()">menu item 1</a>
        <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
                <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void()">submenu item 2 level 2</a>
                <ul>
                    <li>
                        <a href="javascript:void()">submenu item level 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void()">menu item 2</a>
        <ul>
            <li>
                <a href="javascript:void()">submenu item 1 level 2</a>
            </li>
        </ul>     
    </li>
    <li>
        <a href="javascript:void()">menu item 3</a>
    </li>
</ul>

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    menuHead = $('.slide-list li a').click(function() {                     



        $('.selected').removeClass('selected');
        $(this).addClass('selected');


        $(this).next().toggle("slow");



});


});

</script>


</body>
</html>

Answer 1

试试这个

if(window.location.hash.length > 0){
  var $licurrent = $($('.slide-list li').get(window.location.hash.replace('#','')));
  $licurrent.parents("ul").show();
  $licurrent.find("ul:first").show();
  $licurrent.find("a:first").addClass("selected");
}

$(document).ready(function(){
    $('.slide-list li a').click(function(e) {                     
        e.preventDefault();
        $('.selected').removeClass('selected');
        $(this).addClass('selected');

        var $licurrent = $(this).parent();
        window.location.hash = $('.slide-list li').index($licurrent);

        $licurrent.parent().find("li").not($licurrent).find("ul").hide("slow");
        $(this).next("ul").toggle("slow");
    });
});

此代码将在URL中添加哈希值，当您刷新页面时，您可以找到所选的菜单。

Jquery中的嵌套手风琴菜单

1 个答案: