没有面板的Bootstrap手风琴

问题描述：

是否有可能从Bootstrap获得“accordion”功能而不是面板？我有一个基于一些代码的Collapse/Expand Documentation.我有下面的代码，它使用data-parent这应该允许它的工作，但我不能让它像手风琴工作：没有面板的Bootstrap手风琴

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

的一种方法，我可以做任何援助这或如果我做错了什么？

答

您错过了引导程序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

没有面板的Bootstrap手风琴

相关推荐