html - 选项卡式导航栏 Bootstrap4 中的手风琴

问题描述

我对 bootstrap 非常陌生，并且由于它易于使用而掌握了它的窍门，因此我开始创建一个人们可以轻松导航的网页。
我正在使用引导程序将手风琴放在导航栏内，以便更轻松地导航。问题是，虽然第一个选项卡和手风琴工作正常，但当我导航到其他选项卡并与其他手风琴交互时，它们不能正常工作。
当您单击第一个手风琴中的任何卡片时，您可以看到另一个关闭，但是当您在其他手风琴中尝试时，卡片总是显示，我不知道它可能是什么。
我检查了数据目标、数据切换以及 aria-labelledby 和类的名称，但仍然找不到详细信息，我不知道是不是因为 div，因为我插入每个选项卡窗格中带有类手风琴的 div。
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
             aria-selected="true">1. Introducción</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile"
             aria-selected="false">2. Síntomas de la DMRE húmeda</a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact"
             aria-selected="false">3. Factores de riesgo</a>
        </div>
    </nav>

    <div class="tab-content" id="nav-tabContent">

        <!--Primera seccion, INTRODUCCION-->
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <div class="accordion" id="accordion" style="width: 100%">

                <div class="card">
                    <div class="card-header" id="headingOneOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne">
                                <h1 style="display: inline-block;">1.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOneOne" class="collapse show" aria-labelledby="headingOneOne" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingOneTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOneTwo" aria-expanded="false"
                             aria-controls="collapseOneTwo">
                                <h1 style="display: inline-block;">1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOneTwo" class="collapse" aria-labelledby="headingOneTwo" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--Segunda seccion, Sintomas-->
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            <div class="accordion" id="accordion" style="width: 100%">

                <div class="card">
                    <div class="card-header" id="headingTwoOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwoOne" aria-expanded="true" aria-controls="collapseTwoOne">
                                <h1 style="display: inline-block;">2.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">
                                    Síntomas de la descripción de la DMRE húmeda</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwoOne" class="collapse show" aria-labelledby="headingTwoOne" data-parent="#accordion">
                        <div class="card-body">
                            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. 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 sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwoTwo">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwoTwo" aria-expanded="false"
                             aria-controls="collapseTwoTwo">
                                <h1 style="display: inline-block;">2.2</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseTwoTwo" class="collapse" aria-labelledby="headingTwoTwo" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--Tercera seccion, Factores de riesgo-->
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
            <div class="accordion" id="accordion" style="width: 100%">
                <div class="card">
                    <div class="card-header" id="headingThreeOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <h1 style="display: inline-block;">3.1</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingThreeOne" data-parent="#accordion">
                        <div class="card-body">
                            <h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
                            <h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
                                a convivir con ella.</h2>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                             aria-controls="collapseThree">
                                <h1 style="display: inline-block;">3</h1>
                                <h2 style="display: inline-block; margin-left: 10px;">Factores de riesgo</h2>
                            </button>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                        <div class="card-body">
                            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. 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 sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
这也是我的小提琴代码，因此您可以更好地了解它。
标签： htmlcsstwitter-bootstrapbootstrap-4
html - 选项卡式导航栏 Bootstrap4 中的手风琴

问题描述

解决方案

推荐阅读
