Bootstrap 4 折叠组件 - Bootstrap 4 基础教程

折叠组件可用于实现内容的显示和隐藏

基本的折叠

Bootstrap 提供了 data-toggle="collapse" 和 .collapse 实现折叠效果

data-target="#demo" 属性则将折叠标题和折叠内容联系起来

<button data-toggle="collapse" data-target="#demo">折叠的标题</button>
<div id="demo" class="collapse">
要折叠的内容
</div>

data-target 属性可以使用 <a> 的 href 代替

<a href="#demo" data-toggle="collapse">折叠的标题</a>

<div id="demo" class="collapse">
折叠的内容
</div>

默认情况下折叠的内容是隐藏的，添加 .show 可以让内容默认显示

<a href="#demo" data-toggle="collapse">折叠的标题</a>

<div id="demo" class="collapse show">折叠的内容</div>