沒有面板的Bootstrap手風琴

Question

是否有可能從Bootstrap獲得「accordion」功能而不是面板？我有一個基於一些代碼的Collapse/Expand Documentation.我有下面的代碼，它使用data-parent這應該允許它的工作，但我不能讓它像手風琴工作：

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
     <div class="card-header" role="tab" id="headingOne"> 
      <h5 class="mb-0"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">&nbsp;&nbsp; 
        Bla bla bla bla? 
       </a> 
      </h5> 
     </div> 

     <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="card-block"> 
       bla bla bla 
      </div> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-header" role="tab" id="headingTwo"> 
      <h5 class="mb-0"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">&nbsp;&nbsp; 
        bla bla badl bla? 
       </a> 
      </h5> 
     </div> 
     <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="card-block"> 
       bla bla bla? 
      </div> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-header" role="tab" id="headingThree"> 
      <h5 class="mb-0"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">&nbsp;&nbsp; 
        blablalblalbalbalba? 
       </a> 
      </h5> 
     </div> 
     <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="card-block"> 
       BALBL ALBBLAABL BALALABAL BLA! 
      </div> 
     </div> 
    </div> 
</div> 

的一種方法，我可以做任何援助這或如果我做錯了什麼？

Answer 1

您錯過了引導程序js文件，該文件具有摺疊和展開式引導程序的機制，並且沒有這些引導程序手風琴無法工作。確保你的頁頭標籤中的bootstrap css文件剛剛添加到jquery中，尤其是引導程序js文件中。例如。爲bootstrap和js添加以下鏈接和腳本，您的代碼工作得很好。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" /> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 

樣品：http://codepen.io/Nasir_T/pen/VmPeGy