只有一个子类别在引导和角度折叠

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