手把手教你用原生JavaScript造轮子（五）——Collapse折叠面板

文档：Collapse

源码：tiny-wheels

若是以为好用就点个 Star 吧~(〃'▽'〃)

效果

思路

每一个面板折叠、展开的动画效果其实就是去控制collapse-panel的height变化，因此在一开始就须要记录下每一个面板的原始高度，不然用户在折叠面板后，高度就变为 0 了，这时候计算出来的值也为 0，就没法还原为初始高度了

实现

文章只列出关键部分的代码，其他逻辑可自行研究项目中的源码

Collapse与Tabs组件相似，都须要让用户自定义内容，因此HTML结构也是相似的：

<div class="collapse" data-collapse-active="2">
  <div data-collapse-name="折叠面板1" data-collapse-key="1">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板2" data-collapse-key="2">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板3" data-collapse-key="3">
    折叠内容
  </div>
  <div data-collapse-name="折叠面板4" data-collapse-key="4">
    折叠内容
  </div>
</div>
复制代码

保存每一个面板的初始高度：

setCollapsePanels () {
    this.panelsHeight = []
    this.$$collapsePanels.forEach(($panel, index) => {
        this.panelsHeight.push($panel.offsetHeight)
        if (this.$$collapseItems[index].classList.contains('active')) {
            mergeStyle($panel, { height: `${$panel.offsetHeight}px` })
        } else {
            mergeStyle($panel, { height: '0', paddingBottom: '0' })
        }
        setTimeout(() => {
            $panel.classList.add('animate')
        })
    })
}
复制代码

初始必须设置每一个激活面板的height，若是不设置，动画效果会很不天然

看到这里，也许有读者会问，为何非得设置具体的高度呢，让面板的高度默认为auto，而后在0和auto之间切换不就好了吗？

最开始我就是这么作的，而后发现动画效果很是生硬，彻底不是咱们想要的效果，必须设置具体的高度后，动画效果才是正常的，这也就是代码中在初始化时就须要保存面板高度的缘由

这个组件的核心逻辑就是这一个方法，很是简单，剩下的操做就是绑定事件：

bindCollapseItems () {
    this.$$collapseItems.forEach(($item, index) => {
        $item.addEventListener('click', () => {
        if (this.options.accordion) {
            this.clearCollapse($item)
        }
        this.toggleCollapse($item, index)
        const collapseKey = this.$$collapsePanels[index].dataset.collapseKey
        const collapseActiveKeys = this.getCollapseActiveKeys()
        this.options.callback.call(null, $item, collapseKey, collapseActiveKeys)
        })
    })
}
复制代码

经过用户在构造函数中传入的accordion属性，咱们能够判断是否要开启手风琴模式，若是开启，每次点击后清除其他项的样式便可，其余的逻辑源码中都有，这里就不赘述了~

To be continued...