是否可以从 Bootstrap 获得“accordion
”功能而不是它是一个面板?我有一些基于他们的代码 Collapse/Expand Documentation.我有以下使用 data-parent
的代码,它应该允许它工作,但我不能让它像 Accordion 一样工作:
<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 js 文件,该文件具有 Bootstrap 的折叠和展开机制,没有它 Accordion 将无法工作。确保在页面 header 标记中的 Bootstrap css 文件之后添加 jquery,尤其是 Bootstrap 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>
关于javascript - 没有面板的 Bootstrap Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40683701/