Collapse(内容折叠)组件
一、简介
此组件可以将一篇区域收起、展开,类似折叠的效果。主要用于内容过多时,将部分内容折叠。
二、样式
- 分析了这几个组件,发现Bootstrap喜欢将transition的持续时间设置为600ms
- 这个组件并没有什么特殊的样式,一共就几个:
.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=