手风琴折叠
下面的示例通过扩展 card 组件显示了一个简单的手风琴。
使用 data-parent 属性可确保在显示可折叠项之一时,指定父项下的所有可折叠元素都将关闭。
<div class="container">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
可折叠组项目#1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
可折叠组项目#2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
可折叠组项目#3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
</div>
</div>
</div>
</div>
</div>
尝试一下
输出结果如下:
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。
Lorem ipsum dolor坐镇,奉献己任,圣埃塞莫德临时工和劳动大臣。 尽量不要抽烟,不要因抽烟而锻炼。