單擊后Bootstrap崩潰不崩潰

Question

我正在使用bootstrap 4 alpha折疊選項..我有兩個菜單，並且給了collpase類位置：absolute。因此，當我單擊任何折疊按鈕時，它應該打開它的內容，而當單擊下一個折疊按鈕時，它應該打開顯示它的內容。一切正常，但是問題是當我單擊“良好”按鈕顯示它的內容，然后單擊“不良”按鈕顯示它的內容代替“良好”按鈕的內容，但是如果我再次單擊“不良”按鈕或“良好”按鈕，它是不會折疊內容，而只是將內容移動到另一個。

<p>
  <a class="btn btn-danger" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>


.collapse{
  position:absolute;
  width:100%;
}

我要使用此折疊，因為單擊單個按鈕將顯示內容，然后再次單擊該按鈕，它應該折疊，並且當第一次單擊“良好”按鈕時，如果我單擊“不良”按鈕，則應關閉該良好按鈕的內容並顯示“不良”按鈕的內容反之亦然。

這是演示

Answer 1

提供的示例的問題在於，當使用position:absolute時，它將與下一個元素重疊，從而產生怪異的行為。

解決此問題的方法是，我們必須從CSS中刪除position:absolute ，並且必須在打開其他可折疊對象之前關閉所有可折疊對象。

這是工作示例： https : //jsfiddle.net/ep2s35cm/

的HTML

<p>
  <a class="btn btn-danger myButton" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary myButton" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>

的CSS

.collapse{
  width:100%;
}

的JavaScript

$(document).ready(function(){
 $('.myButton').on('click',function(){
 $('.collapse').collapse('hide');
 })
})