Bootstrap：关闭其他导航菜单崩溃通过JS

Question

我已经在bootstrap和JS新。 目前，我有两个navbar-collapse子菜单。 我喜欢关闭所有其他人，当另一个人打开时。

发现这个codesnippet：

$(function() { 
    $('.navbar-collapse').on('show.bs.collapse', function (e) { 
     $('.navbar-collapse').not(this).collapse('hide'); 
    }); 
}); 

我放在这个在$(document).ready(function(){...});。这个事件也会触发崩溃事件，但似乎关闭所有navbar-collapse元素。所以为什么？我怎样才能保存我的目标？

Answer 1

这里是演示

方法1

要折叠都在一起，你还可以使用的东西一样，可以折叠所有具有类“在”的资产净值，因为打开可折叠有类“在”补充说。你抓住他们使用像下面的脚本关闭那些。

$('#accordion .collapse').on('show.bs.collapse', function (e) { 
     $('#accordion .in').collapse('hide'); 
    }); 

方法2

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading " role="tab" id="headingOne"> 
 
      <h4 class="panel-title"> 
 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne"> 
 
        <span class="glyphicon glyphicon-minus"></span> <strong>Link 1</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <!--To make by defualt open a any panel put class "in" (without quotes)--> 
 
     <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="panel-body"> 
 
       Link 1 Link 1 Link 1 Link 1 Link 1 Link 1 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingTwo"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo"> 
 
        <span class="glyphicon glyphicon-plus"></span> <strong>Link 2</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-body"> 
 
       Link 2 Link 2 Link 2 Link 2 Link 2 Link 2 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-info"> 
 
     <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree"> 
 
        <span class="glyphicon glyphicon-plus"></span> <strong>Link 3</strong> 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <div class="panel-body"> 
 
       Link 3 Link 3 Link 3 Link 3 Link 3 Link 3 Link 3 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>