Bootstrap Knopfgruppe Zusammenbruch

Question

Ich habe eine Gruppe von Schaltflächen Gruppe:

<div class="row"> 
    <div class="col-md-2"> 
     <div class="btn-group-vertical btn-group-justified" role="group" id="nav_bar"> 
      <div id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="row"> 
        <a class="btn btn-primary" data-toggle="collapse" href="#Setup1" data-parent="#accordion">Setup1</a> 
        <div id="Setup1" class="panel-collapse collapse"> 
         <div class="col-md-12"> 
          <div class="btn-group-vertical btn-group-justified" role="group"> 
           <div class="row"> 
            <button type="button" class="btn btn-default">MAIN</button> 
           </div> 
           <div class="row"> 
            <button type="button" class="btn btn-default">EXEC</button> 
           </div> 
           <div class="row"> 
            <button type="button" class="btn btn-default">ROUTER</button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <a class="btn btn-primary" data-toggle="collapse" href="#Setup2" data-parent="#accordion">Setup2</a> 
        <div id="Setup2" class="panel-collapse collapse"> 
         <div class="col-md-12"> 
          <div class="btn-group-vertical btn-group-justified" role="group"> 
           <div class="row"> 
            <button type="button" class="btn btn-default">MAIN</button> 
           </div> 
           <div class="row"> 
            <button type="button" class="btn btn-default">EXEC</button> 
           </div> 
           <div class="row"> 
            <button type="button" class="btn btn-default">ROUTER</button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

und in der Ausgabe ist dies:

aber ich kann nicht herausfinden, wie Zusammenbruch eine Gruppe machen, wenn Sie erweitern andere. Könnte jemand damit helfen? Ich habe versucht, mit Panels zu spielen, aber es ist ungeeignet, weil ich einen Stil brauche, der auf dem angehängten Bild zeigte. Und in Panels ist nur Text anklickbar. Danke

Answer 1

Sie können es tun, indem Sie Ihre Elemente mit Bootstrap ordnungsgemäß einrichten.

Sie können aber auch den Zusammenbruch erweitern durch:

$('.btn').on('click',function(){ 
    $('.panel-collapse').each(function(){ 
    $(this).removeClass('in'); 
    }): 
});