手把手教你用原生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...