Bootstrap简单认识之Collapse组件

Collapse（内容折叠）组件

一、简介

此组件可以将一篇区域收起、展开，类似折叠的效果。主要用于内容过多时，将部分内容折叠。

二、样式

1. 分析了这几个组件，发现Bootstrap喜欢将transition的持续时间设置为600ms
2. 这个组件并没有什么特殊的样式，一共就几个：

.collapse {
  display: none;
  &.show {
    display: block;
  }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

而card类貌似是取代了之前的panel，所以这里要使用card类包裹折叠元素，才能实现多个同类元素折叠相互影响的效果。

三、脚本

作用

• 如果是单个组件，那就是用于控制指定元素折叠
• 如果是多个组件一起，即某个元素展开就让其他元素折叠
• 除了上述功能方面的控制，还有部分针对屏幕阅读器的属性控制（这里就暂且不提了）

代码梗概

class Collapse {
  // 构造函数
  constructor(element, config) {
    // 正在 collapsing
    this._isTransitioning = false
    this._element         = element
    this._config          = this._getConfig(config)
    // 触发这个元素collapse的按钮
    this._triggerArray    = $.makeArray($(
      `[data-toggle="collapse"][href=