点击收缩面板

依赖于Bootstrap 5 的JavaScript，实现点击控制展现。

更新于: 2023-04-30 14:28:21 查看: 516

发布于: 2021-9-3 19:30 发布者: 大米

控件原件

折叠JavaScript插件用于显示和隐藏内容。按钮或锚点用作触发器，它们映射到您切换的特定元素。折叠元素将使 height 从当前值设置为 0。考虑到CSS处理动画的方式，不能在 .collapse 元素上使用 padding 。相反，请将该类用作独立的包装元素。

示例 

单击下面的按钮以通过类更改显示和隐藏另一个元素：
  • .collapse 隐藏内容
  • .collapsing 在过渡时运用
  • .collapse.show 展示内容

可以使用带有 href 属性的链接，也可以使用带有 data-bs-target 属性的按钮。在这两种情况下，都需要数据 data-bs-toggle="collapse" 。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>

多重目标

<button> 或 <a> 可以通过在其 href 或 data-bs-target 属性中使用选择器引用多个元素来显示和隐藏它们。如果多个 <button> 或 <a> 都使用 href 或 data-bs-target 属性引用元素，则它们可以显示和隐藏元素

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
</div>
</div>

扩展访问

确保将 aria-expanded 添加到control元素。此属性将绑定到控件的可折叠元素的当前状态显式地传递给屏幕阅读器和类似的辅助技术。如果默认情况下关闭可折叠元素，则控件元素上的属性应具有 aria-expanded="false" 的值。如果已经使用 show 类将可折叠元素设置为默认打开，则改为在控件上设置 aria-expanded="true" 。插件将根据可折叠元素是否被打开或关闭（通过JavaScript，或者因为用户触发了另一个也绑定到同一个可折叠元素的控件元素），在控件上自动切换此属性。如果控件元素的HTML元素不是按钮（例如， <a> 或 <div>），则应将属性 role="button" 添加到元素中。

如果控件元素的目标是单个可折叠元素，即 data-bs-target 属性指向id选择器，则应将 aria-controls 属性添加到控制元素，其中包含可折叠元素的 id 。现代屏幕阅读器和类似的辅助技术利用这个属性为用户提供额外的快捷方式来直接导航到可折叠元素本身。

用法

collapse插件利用几个类来处理繁重的工作：
  • .collapse 隐藏内容
  • .collapse.show 展示内容
  • .collapsing 在转换开始时添加，在转换完成时删除

通过数据属性

只需将 data-bs-toggle="collapse" 和 data-bs-target 添加到元素中，即可自动分配对一个或多个可折叠元素的控制。 data-bs-target 属性接受CSS选择器来应用折叠。确保将类 collapse 添加到可折叠元素中。如果希望它默认打开，请添加额外的类 show。

启用要将类似手风琴的组管理添加到可折叠区域，请添加数据属性 data-bs-parent="#selector"。请参阅演示以查看此操作。

通过 JavaScript

手动启动： 

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})

选项 

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称追加到 data-bs-，如 data-bs-parent=""。

名称 类型 默认 描述
parent selector | jQuery object | DOM element false 如果提供了parent，那么当显示此可折叠项时，指定parent下的所有可折叠元素都将关闭。(类似于传统的手风琴行为-这依赖于 card 类)。必须在目标可折叠区域上设置属性。
toggle boolean true 在调用时切换可折叠元素

方法

将内容激活为可折叠元素。接受可选选项object。

可以使用构造函数创建折叠实例，例如： 

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})

方法 描述
toggle 将可折叠元素切换为显示或隐藏。返回到调用者之前，可折叠元素实际上已经显示或隐藏(即在 shown.bs.collapse 或 hidden.bs.collapse 事件发生)。
show 显示一个可折叠的元素。在可折叠元素实际显示之前返回给调用者(例如，在 shown.bs.collapse 事件发生)。
hide 隐藏可折叠元素。返回到调用者之前，可折叠元素实际上已经被隐藏(例如，在 hidden.bs.collapse 事件发生)。
dispose 停止一个元素的折叠面板。(删除DOM元素上存储的数据)
getInstance 方法策略，它允许您获得与DOM元素关联的collapse实例。/td>

事件

Bootstrap的collapse类声明了一些用于挂载到collapse功能的事件。
事件类型 描述
show.bs.collapse 调用 show 实例方法时，将立即触发此事件。
shown.bs.collapse 当折叠面板的元素对用户可见时将触发此事件（将等待CSS转换完成）。
hide.bs.collapse 调用 hide 方法后，立即触发此事件。
hidden.bs.collapse 当折叠元素已向用户隐藏时将触发此事件（将等待CSS转换完成）。 
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})
扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请