2016-03-24 21 views
0

私は、ボタングループのグループがあります。ブートストラップボタングループの崩壊

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

を出力して、これは次のとおりです。 enter image description here

が、私はあなたが展開する際に、崩壊一つのグループを作る方法を、把握カントその他。誰か助けてもらえますか? 私はパネルで演奏しようとしていましたが、添付の画像に表示されるスタイルが必要なので不適切です。パネルでは、テキストのみがクリック可能です。 ありがとう

+0

は、あなたは、ID属性としてアコーディオンを与えているが、それはすべきクラスになる – Aparna

答えて

1

あなたは適切にブートストラップで要素を設定することでそれを行うことができます。

しかし、あなたはまたによって崩壊拡張することができます。このhttp://getbootstrap.com/2.3.2/javascript.html#collapseを試してみてください

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