我有一个菜单,当用户在该页面上时,该菜单已打开。所以当用户点击另一个菜单时,打开的菜单需要关闭,另一个菜单打开。到目前为止,我只设法在点击时打开菜单。我无法关闭另一个打开的菜单。点击另一个菜单时关闭菜单
我的HTML
<div class="col-lg-4 col-md-4">
<div class="second_menu">
<div id="second-menu" class="collapse navbar-collapse menu_two">
<ul class="nav navbar-nav inside-nav">
<li class="active_sub_menu">
<a href="javascript:void(0);">Menu 1</a>
<ul class="sidenav_wrapper">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 1</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 2</a>
<ul class="sidenav_wrapper" style="display: none;">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 2</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 3</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 4</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 5</a>
</li>
</ul>
</li>
<li class="sub_menu">
<a href="javascript:void(0);">Menu 3</a>
<ul class="sidenav_wrapper" style="display: none">
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 6</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 7</a>
</li>
<li class="sidenav_item">
<a href="javascript:void(0);">Sub menu 8</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
我的CSS
.active_sub_menu .sidenav_wrapper {
display: block;
}
我的JS
$(".sidenav_active").parent().css({"display":"block"});
$('ul.navbar-nav li').click(function(){
$(this).find('.sidenav_wrapper:first').toggle();
});
我的jsfiddle:JSFIDDLE
就是这样。谢谢。 – Niks