[英]Bootstrap Accordion without Panel
是否可以從Bootstrap獲得“ accordion
”功能而不將其作為面板? 我有一些基於其折疊/展開文檔的代碼。 我有以下使用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">
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">
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">
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>
在我可以執行此操作的方式上是否有任何幫助,或者我做錯了什么?
您缺少具有bootstrap折疊和展開機制的bootstrap js文件,如果沒有該文件,則手風琴無法正常工作。 確保在頁面head標簽中的bootstrap css文件之后立即添加jquery,尤其是bootstrap js文件。 例如,為引導程序和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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.