CSS可摺疊組 - Bootstrap

Question

我正在使用bootstrap可摺疊按鈕組。我只想要一個單一的組框在一次可見。我在js中創建了一個函數來刪除「in」類並更改擴展的擴展語句，但我認爲這是無用的，因爲人們正在使用data-parent =「＃myGroup」。

顯然data-parent =「＃myGroup」不會爲我工作的原因。

我試過在單個元素上使用數據父項，並且在按鈕和摺疊組上仍然無法使其工作。

在這個小提琴中，您可以看到可以顯示多個組。當我按下按鈕時，我希望其他人隱藏。

<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

這不是你想要的。 Bootstrap沒有這個選項。

你有3種選擇：

1. 使用從引導手風琴 - >http://getbootstrap.com/javascript/#collapse
2. 使用從引導選項卡 - >http://getbootstrap.com/javascript/#tabs（這是如果你不想程序，你只需要最好的之一。以改變標籤樣式，如按鈕。）
3. 自己編寫它。