選項卡式導航欄中的手風琴Bootstrap4

Question

我真的是不熟悉Bootstrap的人，因為它易於使用，因此一竅不通，因此我開始創建一個網頁，人們可以在其中輕松導航。

我正在使用引導程序將導航欄中的手風琴放進去，以便於導航。 問題是，盡管第一個選項卡和手風琴正常工作，但是當我導航到其他選項卡並與其他手風琴進行交互時，它們卻無法正常工作。

當您單擊第一個手風琴中的任何一張卡片時，您會看到另一張關閉了，但是當您嘗試在其他手風琴中嘗試時，這些卡片總是顯示出來，我不知道那是什么。

我檢查了數據目標的名稱，數據切換的名稱以及aria-labelledby和類，但仍然找不到詳細信息，我不知道是否是因為divs，因為我插入了每個選項卡窗格中具有類手風琴的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>

這也是我的小提琴代碼，因此您可以更好地了解它。

Answer 1

@ git-e-up是正確的。 每個手風琴組都需要唯一的ID。 例如：

<div class="accordion" id="accordion1">

檢查此更新的小提琴