Bootstrap/docs/4.5/components/collapse
坍方
通过几个类和我们的JavaScript插件,可以在整个项目中切换内容的可见性。
这个怎么运作
折叠JavaScript插件用于显示和隐藏内容。 按钮或锚点用作映射到您切换的特定元素的触发器。 崩溃的元素将动画 height 从当前值到 0 。鉴于CSS如何处理动画,您将无法使用 padding on a .collapse 元件。 而是将类用作独立的包装元素。
该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .
例
单击下面的按钮以通过类更改显示和隐藏另一个元素：
.collapse隐藏内容.collapsing在过渡期间应用.collapse.show显示内容
您可以将链接与 href 属性,或带有 data-target 属性。 在这两种情况下, data-toggle="collapse" 是必须的。
<p>
<a aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"> 与href连结 </a>
<button aria-controls="collapseExample" aria-expanded="false" class="btn btn-primary" data-target="#collapseExample" data-toggle="collapse" type="button"> 具有数据目标的按钮 </button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 </div>
</div>多个目标
A<button> or <a> 可以通过在其元素中使用JQuery选择器进行引用来显示和隐藏多个元素 href or data-target 属性。 多 <button> or <a> 可以显示和隐藏一个元素,如果他们每个人都引用它们 href or data-target 属性
<p>
<a aria-controls="multiCollapseExample1" aria-expanded="false" class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button"> 切换第一个元素 </a>
<button aria-controls="multiCollapseExample2" aria-expanded="false" class="btn btn-primary" data-target="#multiCollapseExample2" data-toggle="collapse" type="button"> 切换第二个元素 </button>
<button aria-controls="multiCollapseExample1 multiCollapseExample2" aria-expanded="false" class="btn btn-primary" data-target=".multi-collapse" data-toggle="collapse" type="button"> 切换两个元素 </button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 </div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 </div>
</div>
</div>
</div>手风琴的例子
使用 card 组件,您可以扩展默认的折叠行为以创建手风琴。 为了正确实现手风琴风格,请务必使用 .accordion 作为包装。
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button aria-controls="collapseOne" aria-expanded="true" class="btn btn-link btn-block text-left" data-target="#collapseOne" data-toggle="collapse" type="button"> 可折叠组项目#1 </button>
</h2>
</div>
<div aria-labelledby="headingOne" class="collapse show" data-parent="#accordionExample" id="collapseOne">
<div class="card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 3狼月亮官方定义,非cupidatat滑板dolor早午餐。 食品卡车藜麦nesciunt laborum eiusmod。 早午餐3狼月亮时期,圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 广告纯素食者屠夫副lomo。 绑腿occaecat精酿啤酒从农场到餐桌,您可能还没有听说过原始牛仔美感合成纤维,因为它们是可持续的VHS。 </div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-link btn-block text-left collapsed" data-target="#collapseTwo" data-toggle="collapse" type="button"> 可折叠组项目2 </button>
</h2>
</div>
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordionExample" id="collapseTwo">
<div class="card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 3狼月亮官方定义,非cupidatat滑板dolor早午餐。 食品卡车藜麦nesciunt laborum eiusmod。 早午餐3狼月亮时期,圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 广告纯素食者屠夫副lomo。 绑腿occaecat精酿啤酒从农场到餐桌,您可能还没有听说过原始牛仔美感合成纤维,因为它们是可持续的VHS。 </div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button aria-controls="collapseThree" aria-expanded="false" class="btn btn-link btn-block text-left collapsed" data-target="#collapseThree" data-toggle="collapse" type="button"> 可折叠组项目3 </button>
</h2>
</div>
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordionExample" id="collapseThree">
<div class="card-body"> Animal pariatur cliche reprehenderit,enim eiusmod high lifeAccusamus Terry Richardson和Ad Squid。 3狼月亮官方定义,非cupidatat滑板dolor早午餐。 食品卡车藜麦nesciunt laborum eiusmod。 早午餐3狼月亮时期,圣阿里夸在上面放了一只鸟鱿鱼单一产地的咖啡nulla假设n。 Nihil anim keffiyeh helvetica,精酿啤酒劳斯·韦斯·安德森·克雷泽·内塞普·萨皮恩特都很有名。 广告纯素食者屠夫副lomo。 绑腿occaecat精酿啤酒从农场到餐桌,您可能还没有听说过原始牛仔美感合成纤维,因为它们是可持续的VHS。 </div>
</div>
</div>
</div>无障碍
确保添加 aria-expanded 到控制元素。 此属性将与控件关联的可折叠元素的当前状态明确传达给屏幕阅读器和类似辅助技术。 如果默认情况下可折叠元素是关闭的,则控制元素上的属性的值应为 aria-expanded="false" 。如果您将可折叠元素默认设置为使用 show 类,集 aria-expanded="true" 在控件上。 插件将基于是否已打开或关闭可折叠元素（通过JavaScript,或者因为用户触发了另一个也绑定到同一可折叠元素的控件元素）而自动在控件上切换此属性。 如果控件元素的HTML元素不是按钮（例如, <a> or <div> ）,属性 role="button" 应该添加到元素中。
如果您的控制元素定位到单个可折叠元素,即 the data-target 属性指向一个 id 选择器–您应添加 aria-controls 控制元素的属性,包含 id 可折叠元素。 现代屏幕阅读器和类似的辅助技术利用此属性为用户提供其他快捷方式,以直接导航到可折叠元素本身。
请注意,Bootstrap的当前实现并未涵盖 WAI-ARIA创作实践1.1手风琴模式 -您需要使用自定义JavaScript包含这些内容。
用法
折叠插件利用一些类来处理繁重的工作：
.collapse隐藏内容.collapse.show显示内容.collapsing在过渡开始时添加,在过渡结束时删除
这些类可以在 _transitions.scss.
通过数据属性
只需添加 data-toggle="collapse" 和a data-target 到元素以自动分配对一个或多个可折叠元素的控制。 The data-target 属性接受CSS选择器来应用折叠。 请务必添加课程 collapse 到可折叠元素。 如果您希望它默认打开,请添加其他类 show.
要将类似手风琴的组管理添加到可折叠区域,请添加data属性 data-parent="#selector" 。请参阅演示以查看实际操作。
通过JavaScript
手动启用：
选项
可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-parent="".
| Name | Type | 默认 | 描述 |
|---|---|---|---|
| 亲 | jQuery对象| DOM元素 | 假 | 如果提供了parent,那么当显示此可折叠项时,指定父下的所有可折叠元素都将关闭。 （类似于传统的手风琴行为-这取决于 card 类）。 必须在目标可折叠区域上设置属性。
|
| 切换 | 布尔 | true | 在调用时切换可折叠元素 |
方法
异步方法和转换
所有API方法都是 异步 然后开始 过渡 。转换开始后,他们会立即返回给呼叫者,但 在结束之前 。此外,在 过渡组件将被忽略 .
.collapse(options)
将您的内容激活为可折叠元素。 接受可选选项 object.
.collapse('toggle')
将可折叠元素切换为显示或隐藏。 在实际显示或隐藏可折叠元素之前返回到调用者 （即 之前 shown.bs.collapse or hidden.bs.collapse 事件发生）。
.collapse('show')
显示可折叠元素。 在实际显示可折叠元素之前返回到调用者 （即 之前 shown.bs.collapse 事件发生）。
.collapse('hide')
隐藏可折叠的元素。 在可折叠元素实际被隐藏之前返回到调用者 （即 之前 hidden.bs.collapse 事件发生）。
.collapse('dispose')
破坏元素的收合。
活动
Bootstrap的折叠类提供了一些事件,可用于连接折叠功能。
| 事件类型 | 描述 |
|---|---|
| show.bs.collapse | 当 show 实例方法被调用。
|
| 显示.bs。崩溃 | 当折叠元素对用户可见时将触发此事件（将等待CSS转换完成）。 |
| hide.bs.collapse | 当 hide 方法已被调用。
|
| 隐藏的.bs。崩溃 | 当折叠元素已向用户隐藏时将触发此事件（将等待CSS转换完成）。 |
