Question

是否可以获得＆＃34; accordion＆＃34; Bootstrap的功能，而不是面板？我有一些基于他们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

您错过了bootstrap js文件，该文件具有引导程序的折叠和扩展机制，根据此类手风琴无法使用。确保在页头标记中的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>

示例：http://codepen.io/Nasir_T/pen/VmPeGy

没有面板的Bootstrap手风琴

1 个答案: