前端必知必会-Bootstrap 5 折叠Collapse

---

Bootstrap 5 折叠

基本可折叠元素

当您想要隐藏和显示大量内容时，可折叠元素非常有用：

示例

<button data-bs-toggle="collapse" data-bs-target="#demo">可折叠元素</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

示例说明
.collapse 类表示可折叠元素（在我们的示例中为 <div>）；这是单击按钮即可显示或隐藏的内容。

要控制（显示/隐藏）可折叠内容，请将 data-bs-toggle=“collapse” 属性添加到 <a> 或 <button> 元素。然后添加 data-bs-target=“#id” 属性以将按钮与可折叠内容（<div id="demo">）连接起来。

注意：对于<a>元素，您可以使用 href 属性而不是 data-bs-target 属性：
示例

<a href="#demo" data-bs-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Lorem ipsum dolor text...</div>` 

默认情况下，可折叠内容是隐藏的。但是，您可以添加 .show 类以默认显示内容：
示例

<div id="demo" class="collapse show"> Lorem ipsum dolor text.... </div> `

Accordion

以下示例通过扩展卡片组件展示了一个简单的手风琴。

注意：使用 data-bs-parent 属性确保在显示其中一个可折叠项时，指定父级下的所有可折叠元素都将关闭。

示例

<div id="accordion">

<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
可折叠组项目 #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
可折叠组项目 #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
可折叠组项 #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

</div>

---

总结

本文介绍了Bootstrap 5 折叠Collapse的使用，如有问题欢迎私信和评论