只有一個子類別在引導和角度摺疊

Question

我使用的是jquery和bootstrap，並且我有一個下拉菜單，點擊該類別後會打開。但我一次只想要擴展一個類別。如果任何其他類別已經展開，然後在一些其他類別的點擊，擴大類別應崩潰

<div class="row"> 
    <div class="col-md-offset-1 col-md-3 col-sm-offset-0 col-sm-4"> 
     <div id="menu"> 
      <div class="panel list-group"> 
       <a href="" class="list-group-item" id="heading"> 
        <strong>Browse By Categories</strong> 
       </a> 
       <div> 
        <a class="list-group-item" data-toggle="collapse" data-target="#AAA" data-parent="#menu"> 
         AAA <span class="glyphicon glyphicon-chevron-down pull-right"></span> 
        </a> 
        <div id="AAA" class="sublinks collapse"> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
        </div> 
       <a class="list-group-item" data-toggle="collapse" data-target="#BBB" data-parent="#menu"> 
         BBB <span class="glyphicon glyphicon-chevron-down pull-right"></span> 
        </a> 
        <div id="BBB" class="sublinks collapse"> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
         <a class="list-group-item small"> 
          <span class="glyphicon glyphicon-chevron-right"></span> aaaa 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我已附上的jsfiddle還，如果可能的話，請修復它。

https://jsfiddle.net/dpmvvq25/3/

謝謝。

Answer 1

我認爲你需要手風琴組成部分，這裏有一個例子使用引導： http://jsfiddle.net/zessx/r6eaw/12/

function toggleChevron(e) { 
$(e.target) 
    .prev('.panel-heading') 
    .find("i.indicator") 
    .toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); 
} 
$('#accordion').on('hidden.bs.collapse', toggleChevron); 
$('#accordion').on('shown.bs.collapse', toggleChevron);