Bootstrap系列之折叠（Collapse）

---

通过一些类和我们的JavaScript插件在项目中切换内容的可见性。

1、工作原理

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

该组件的动画效果依赖于preferred -reduced-motion media查询。

2、示例

单击按钮通过类更改来显示和隐藏另一个元素

• .collapse 隐藏内容
• .collapsing 应用在过渡期间
• .collapse.show 展示内容

通常，我们建议使用带有data-target属性的按钮。虽然不建议从语义的角度来看，但您也可以使用带有href属性的链接(以及role="button")。在这两种情况下，data-toggle="collapse"都是必需的。

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

3、多目标

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

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

4、手风琴示例

使用card组件，可以扩展默认折叠行为以创建手风琴。要正确地实现手风琴样式，请确保使用.accordion作为包装器。

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

5、可及性

请确保将aria-expanded添加到控件元素。这个属性将绑定到控件的可折叠元素的当前状态显式地传达给屏幕阅读器和类似的辅助技术。如果可折叠元素默认关闭，则控制元素的属性值应为aria-expanded="false"。如果使用show类将可折叠元素设置为默认打开状态，则在控件上设置aria-expanded="true"。插件会根据可折叠元素是否被打开来自动切换该属性

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

注意，Bootstrap当前的实现没有涵盖WAI-ARIA Authoring Practices 1.1手风琴模式中描述的各种键盘交互—您需要自己用自定义JavaScript包含这些交互。

6、用法

折叠插件利用几个类来处理繁重的任务

• .collapse 隐藏内容
• .collapsing 应用在过渡期间
• .collapse.show 展示内容

这些类可以在transitions.scss中找到。

6.1、通过data属性

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

要在可折叠区域中添加类似手风琴的组管理，请添加数据属性data-parent="#selector"。

6.2、通过JavaScript

手动启动

$('.collapse').collapse()

6.3、选项

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

6.4、方法

异步方法和转换
所有API方法都是异步的，并开始转换。它们在转换开始后立即返回给调用者，但在转换结束前返回。此外，对转换组件的方法调用将被忽略。

6.4.1、.collapse(options)

将内容激活为可折叠元素。接受一个可选的选项对象。

$('#myCollapsible').collapse({
    
    
  toggle: false
})

6.4.2、.collapse(‘toggle’)

将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前返回给调用者(即在shown.bs.collapse或hidden.bs.collapse事件发生之前)。

6.4.3、.collapse(‘show’)

显示可折叠元素。在可折叠元素实际显示之前返回给调用者(即在shown.bs.collapse事件发生之前)。

6.4.4、.collapse(‘hide’)

隐藏可折叠元素。在可折叠元素被隐藏之前返回给调用者(即在hidden.bs.collapse事件发生之前)。

6.4.5、.collapse(‘dispose’)

销毁折叠元素

6.5、事件

Bootstrap的折叠类暴露了一些与折叠功能挂钩的事件

$('#myCollapsible').on('hidden.bs.collapse', function () {
    
    
  // do something...
})

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！