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>