Bootstrap垂直菜单 - 点击另一个时关闭当前菜单项
问题描述:
我使用Bootstrap并找到了一个相当不错的垂直菜单。我怎么做,当我点击例如项目'菜单A',所有其他未清项目,如菜单B,菜单C,将被关闭?这里是我的小提琴:Bootstrap Vertical MenuBootstrap垂直菜单 - 点击另一个时关闭当前菜单项
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<a href="#"><i class="fa fa-gift fa-lg"></i> Menu A <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active"><a href="#">CSS3 Animation</a></li>
<li><a href="#">General</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Tabs & Accordions</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">FontAwesome</a></li>
<li><a href="#">Slider</a></li>
<li><a href="#">Panels</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Bootstrap Model</a></li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<a href="#"><i class="fa fa-globe fa-lg"></i> Menu B <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a href="#"><i class="fa fa-car fa-lg"></i> Menu C <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
谢谢!
答
你可以像下面这样做
$(".menu-content > li").click(function() {
$(".menu-content").find(".sub-menu").not($(this).next('.sub-menu')).removeClass("in");
});
答
请看看更新的小提琴:
https://jsfiddle.net/rpg4gd88/3/
$('ul#menu-content > ul').on('show.bs.collapse', function (e,obj) {
$("ul#menu-content > ul").not(this).removeClass("in");
var currentHead = $(this).prev("li");
$("ul#menu-content > li").not(currentHead).removeClass("active");
$(currentHead).addClass("active");
})
,我们可以勾我们的代码show.bs.collapse
事件关闭其他以前打开菜单。
巧妙!感谢您的快速回复:-) – mamgoo
不客气@mamgoo。 – smdsgn