引导程序4:如何在几个不同的数据切换元素下显示单个可折叠元素

Question

用例：https://getbootstrap.com/docs/4.0/components/collapse/#accordion-示例

我有一个场景，我有多个数据切换组件，它们切换同一个元素。假设用例是每当使用单击任何链接时，将可折叠元素放置在每个数据切换元素的正下方。

可以在这里找到原始行为和期望行为的小提琴(https://jsfiddle.net/34uv2ezf/)

<h2> Needs to be tweaked !!</h2>
<div class="row" id="NeedsToBeTweaked">
<div class="col-md-12">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #2
</button>
</h5>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #3
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" 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>

Answer 1

您必须更改所有折叠中的数据目标，并更改应答中的id不要忘记阅读代码中的注释

<div class="container-fluid">
<h2> Needs to be tweaked !!</h2>
<div class="row" id="NeedsToBeTweaked">
<div class="col-md-12">


<div id="accordion">
<!-- One -->
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <!-- change data-target here-->
Collapsible Group Item #1
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion"><!-- change id here-->
<div class="card-body">
This First One
</div>
</div>

<!-- Tow -->
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTow" aria-expanded="false" aria-controls="collapseTow"><!-- change data-target here-->
Collapsible Group Item #2
</button>
</h5>
</div>
</div>
<div id="collapseTow" class="collapse" data-parent="#accordion"> <!-- change id here-->
<div class="card-body">
This Second One
</div>
</div>

<!-- Three -->
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <!-- change data-target here-->
Collapsible Group Item #3
</button>
</h5>
</div>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion"><!-- change id here-->
<div class="card-body">
This Thered one
</div>
</div>
</div>
</div>
</div>