CSS折りたたみグループ - ブートストラップ

Question

私はブートストラップ折りたたみ式のボタングループを使用しています。一度に表示できるグループボックスは1つだけです。私はjsで "in"クラスを削除し、aria-expandedステートメントを変更する機能を作ったが、人々がdata-parent = "＃myGroup"を使用しているのでこれは役に立たないと思う。

明らかに、data-parent = "＃myGroup"は私のためには機能しません。

私は単一の要素と両方のボタンと崩壊グループでdata-parentを使用しようとしましたが、それでも動作させることはできません。

このフィドルでは、複数のグループを表示できることがわかります。私はボタンを押すと他の人が隠れるようにしたい。

<link rel="stylesheet" href="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<p> 
 
    <button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup"> 
 
    A 
 
    </button> 
 

 
    <button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup"> 
 
    B 
 
    </button> 
 

 
    <button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup"> 
 
    C 
 
    </button> 
 

 
     <button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup"> 
 
    D 
 
    </button> 
 
</p> 
 

 

 
<div class="collapse" id="AA" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
    </div> 
 
</div> 
 

 

 
<div class="collapse" id="BB" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
bla bla bla 
 
    </div> 
 
</div> 
 

 

 

 

 
<div class="collapse" id="CC" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
    </div> 
 
    </div> 
 

 

 

 
<div class="collapse" id="DD" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

Answer 1

これは動作します。

http://plnkr.co/edit/HlrIvDW71JSVemkbhejy?p=preview

<div id="container"> 
    <div class="panel"> 
    <p> 
     <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container"> 
      A 
     </button> 
     <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container"> 
      B 
     </button> 
    </p> 

    <div class="collapse" id="AA"> 
     <div class="card card-block"> 
      bla bla bla A 
     </div> 
    </div> 

    <div class="collapse" id="BB"> 
     <div class="card card-block"> 
     bla bla bla B 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

これは、あなたが望むものではありません。ブートストラップにはこのオプションはありません。

あなたは3つのオプションがあります：ブートストラップから

1. 利用アコーディオンを - >http://getbootstrap.com/javascript/#collapseブートストラップから
2. 使用するタブ - >http://getbootstrap.com/javascript/#tabs（これは、あなたがプログラムしたくない場合は、単に必要な最良のものです。ボタンのようなタブのスタイルを変更する）
3. あなた自身でプログラムします。