折叠面板
使用一些类和我们的 JavaScript 插件来切换项目中内容的可见性。
怎么运行的
collapse JavaScript 插件用于显示和隐藏内容。按钮或锚点用作映射到您切换的特定元素的触发器。折叠元素将使 的动画height从其当前值变为0。鉴于 CSS 处理动画的方式，您不能padding在.collapse元素上使用。相反，将该类用作独立的包装元素。
prefers-reduced-motion媒体查询。请参阅我们的辅助功能文档的减少运动部分。
例子
单击下面的按钮以通过类更改显示和隐藏另一个元素：
.collapse隐藏内容.collapsing在过渡期间应用.collapse.show显示内容
通常，我们建议使用<button>带有data-bs-target属性的。虽然从语义的角度不推荐，但您也可以使用<a>带有href属性（和role="button"）的链接。在这两种情况下，data-bs-toggle="collapse"都是必需的。
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>水平的
折叠插件支持水平折叠。添加.collapse-horizontal修饰符类以过渡 the widthinstead of并在直接子元素上height设置 a 。width随意编写您自己的自定义 Sass、使用内联样式或使用我们的宽度实用程序。
min-height在我们的文档中设置了避免过度重绘的设置，但这并不是明确要求的。只有width子元素上的 是必需的。
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>多个切换和目标
<button>or元素可以通过在其or属性<a>中使用选择器来引用它们来显示和隐藏多个元素。相反，多个or元素可以显示和隐藏同一个元素，如果它们每个都使用它们的or属性引用它。data-bs-targethref<button><a>data-bs-targethref
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>辅助功能
务必添加aria-expanded到控件元素。此属性明确地将与控件相关联的可折叠元素的当前状态传达给屏幕阅读器和类似的辅助技术。如果可折叠元素默认关闭，则控件元素上的属性值应为aria-expanded="false"。如果您已使用show类将可折叠元素设置为默认打开，aria-expanded="true"请改为在控件上设置。该插件将根据可折叠元素是否已打开或关闭（通过 JavaScript，或者因为用户触发了另一个也绑定到同一可折叠元素的控件元素）自动切换控件上的此属性。如果控件元素的 HTML 元素不是按钮（例如，<a>或<div>），则该属性role="button"应该添加到元素中。
如果您的控制元素以单个可折叠元素为目标——即data-bs-target属性指向一个id选择器——您应该将aria-controls属性添加到控制元素，包含id可折叠元素的 。现代屏幕阅读器和类似的辅助技术利用此属性为用户提供额外的快捷方式以直接导航到可折叠元素本身。
请注意，Bootstrap 的当前实现不涵盖ARIA 创作实践指南手风琴模式中描述的各种可选键盘交互- 您需要自己将这些与自定义 JavaScript 包含在一起。
SASS
变量
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
班级
可以在中找到折叠过渡类，scss/_transitions.scss因为它们在多个组件（折叠和手风琴）之间共享。
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}