我是初学者，因为它易于使用，我开始创建一个人们可以轻松导航的网页 .
我正在使用引导程序将一个手风琴放入导航栏内以便更轻松地导航 . 问题是，当第一个标签和手风琴正常工作时，当我导航到其他标签并与其他手风琴互动时，它们无法正常工作 .
当您点击第一个手风琴中的任何一张牌时，您可以看到另一张牌关闭，但当您在其他牌中尝试时，会始终显示牌，我不知道它可能是什么 .
我检查了数据目标，数据切换，以及aria-labelledby和类的名称，但仍然找不到详细信息，我不知道是不是因为div，因为我插入每个标签窗格中带有 class 手风琴的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>
这也是我在fiddle中的代码，因此您可以更好地了解它 .
1 回答
@ git-e-up是正确的 . 每个手风琴组都需要唯一的ID . 例如：
Check this updated Fiddle