Bootstrap4手风琴将保持打开状态

时间:2018-07-11 20:57:45

标签: html bootstrap-4

全部-

我在Bootstrap 3.7.7上进行了这项工作。更新至4.1.1。我的手风琴坏了。他们不会保持开放。该链接起作用,并且卡看起来像它将打开,然后自行关闭或消失。就像我说过的,今天上午在3.7.7上一切正常,但是想在我继续前进之前达到4.1.1。

    <!--Accordion wrapper-->
    <div class="accordion accordion-4" id="accordion1" role="tablist" aria-multiselectable="true">
        <div class="card">
            <div class="card-header" role="tab" id="HeadingInternet">
                <a class="card-title" data-toggle="collapse" data-parent="#accordion1" data-target="#collapse10" href="#collapse10" aria-expanded="false" aria-controls="#collapse10">
                    <h3 class="mb-0 font-weight-bold">
                        Internet<span class="fa fa-angle-double-down pull-right" href="#collapse10"></span>
                    </h3>
                </a>
            </div>
            <div id="collapse10" class="collapse" data-parent="#accordion1" aria-labelledby="#HeadingInternet">
                <div class="card-body">
                    <p>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                        non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                        3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                        shoreditch et.
                    </p>

                    <p>
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                        sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                        farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                        accusamus labore.
                    </p>
                </div>
            </div>
        </div>
        <!-- Accordion card -->
        <div class="card">
            <div class="card-header" role="tab" id="headingTV">
                <a class="collapsed" data-toggle="collapse" href="#collapse11" data-parent="#accordion1" aria-expanded="false" aria-controls="collapse11">
                    <h3 class="mb-0 black-text text-left font-weight-bold">TV<span class="fa fa-angle-double-down pull-right" href="#collapse11"></span></h3>
                </a>
            </div>
            <div id="collapse11" class="collapse" role="tabpanel" aria-labelledby="headingTV" data-parent="#accordion1">
                <div class="card-body">
                    <p>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                        non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                        3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                        shoreditch et.
                    </p>

                    <p>
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                        sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                        farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                        accusamus labore.
                    </p>
                </div>
            </div>
        </div>
        <!-- Accordion card -->
        <div class="card">
            <div class="card-header" role="tab" id="headingPhone">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapse12" aria-expanded="false" aria-controls="collapse12">
                    <h3 class="mb-0 black-text text-left font-weight-bold">Phone<span class="fa fa-angle-double-down pull-right" href="#collapse12"></span></h3>
                </a>
            </div>
            <div id="collapse12" class="collapse" role="tabpanel" aria-labelledby="heading12" data-parent="#accordion1">
                <div class="card-body">
                    <p>
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
                        non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
                        3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                        shoreditch et.
                    </p>

                    <p>
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                        sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                        farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
                        accusamus labore.
                    </p>
                </div>
            </div>
        </div>
    </div>

0 个答案:

没有答案