Bootstrap 5 折叠
基本可折叠
当您想隐藏和显示大量内容时，可折叠很有用
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
示例
<button data-bs-toggle="collapse" data-bs-target="#demo">可折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
自己试试 »
示例说明
The .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">可折叠</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
自己试试 »
默认情况下，可折叠内容是隐藏的。但是，您可以添加 .show 类，以便默认情况下显示内容
手风琴
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
以下示例通过扩展卡片组件展示了一个简单的手风琴。
注意：使用 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>
自己试试 »
