可摺疊按鈕 - 引導程序3.3.4

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

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

來源

2016-10-08 user1947700

的答案：http://stackoverflow.com/questions/39944224/css -collapsible-groups-bootstrap這是一個重複的問題。 – user1947700

帖子來自：上重複問題AMBS：CSS Collapsible groups - Bootstrap


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

來源

2016-10-09 20:46:35 user1947700

可摺疊按鈕 - 引導程序3.3.4

回答

相關問題