Bootstrap垂直菜单 - 点击另一个时关闭当前菜单项

Question

我使用Bootstrap并找到了一个相当不错的垂直菜单。我怎么做，当我点击例如项目'菜单A'，所有其他未清项目，如菜单B，菜单C，将被关闭？这里是我的小提琴：Bootstrap Vertical Menu

<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> 

谢谢！

Answer 1

你可以像下面这样做

$(".menu-content > li").click(function() { 
    $(".menu-content").find(".sub-menu").not($(this).next('.sub-menu')).removeClass("in"); 
}); 

Answer 2

请看看更新的小提琴：

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事件关闭其他以前打开菜单。