手风琴菜单应该保持开放的子页面

Question

我创建了下面的jQuery Java脚本一个简单的手风琴菜单：

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

https://jsfiddle.net/8y60hre0/

的问题是，它关闭所有的子菜单，当我在子页面。

我该如何更改代码，当我在其子页面上时，特定的子页面菜单保持打开状态？

当我在子页面上活动时，会有一个“活动”类添加到li标签。

预先感谢您！

Answer 1

您每次页面加载时都需要slideToggle()子菜单。在这个例子中，模拟用户点击active的母链接或active链接（如果它不在子菜单中）。

$(document).ready(function() { 
 
    $('#nav > li > a').click(function(){ 
 
    if ($(this).attr('class') != 'active'){ 
 
     $('#nav li ul').slideUp(); 
 
     $(this).next().slideToggle(); 
 
     $('#nav li a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
    if($(".active").parent().parent().is('#nav')){ 
 
    \t \t $(".active").next().slideToggle(); 
 
    }else{ 
 
    \t $(".active").parents('ul').siblings('a').click(); 
 
    } 
 
    
 
});

#nav { 
 
    float: left; 
 
    width: 280px; 
 
} 
 
#nav li a { 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    color: #000; 
 
    list-style:none; 
 
} 
 
#nav li a:hover, #nav li a.active { 
 
} 
 
#nav li ul { 
 
    display: none; // used to hide sub-menus 
 
    list-style:none; 
 
} 
 
#nav li ul li a { 
 
    padding: 10px 25px; 
 
} 
 
ul{ 
 
    list-style:none; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
    <li><a href="#" >Item 1</a> 
 
    <ul> 
 
     <li><a href="#" class="active">Sub-Item 1 a</a></li> 
 
     <li><a href="#">Sub-Item 1 b</a></li> 
 
     <li><a href="#">Sub-Item 1 c</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 2 a</a></li> 
 
     <li><a href="#">Sub-Item 2 b</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 3 a</a></li> 
 
     <li><a href="#">Sub-Item 3 b</a></li> 
 
     <li><a href="#">Sub-Item 3 c</a></li> 
 
     <li><a href="#">Sub-Item 3 d</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Item 4</a> 
 
    <ul> 
 
     <li><a href="#">Sub-Item 4 a</a></li> 
 
     <li><a href="#">Sub-Item 4 b</a></li> 
 
     <li><a href="#">Sub-Item 4 c</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

这里有一个jsFiddle有可能的解决方案