我有一個菜單,當用戶在該頁面上時,該菜單已打開。所以當用戶點擊另一個菜單時,打開的菜單需要關閉,另一個菜單打開。到目前爲止,我只設法在點擊時打開菜單。我無法關閉另一個打開的菜單。點擊另一個菜單時關閉菜單
我的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