没有面板的自举手风琴

Question

是否可以从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">&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

您缺少具有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>

范例： http ： //codepen.io/Nasir_T/pen/VmPeGy