原生JS實現摺疊面板

摺疊面板實現效果圖

在日常業務開發中產品和UI常常會把文字較多或者一些訂單信息設置成卡片而後以摺疊的形式展示，目的是爲了讓首屏的可視空間加大。

實現思路：主要是控制盒子的高度配合溢出隱藏以及添加過渡效果，即可實現摺疊面板。

{
	transition: all 0.3s;   // 添加過渡效果
    	overflow: hidden;       // 超太高度的隱藏
}
複製代碼

進入正題，先肯定結構：

<div class="mx-4 my-4 fold bg-white" id="fold_{{index}}" >      
    <!-- 摺疊顯示區域 -->
    <div class="fold-main d-flex jc-between ai-center mx-5" id="{{index}}">
        <span class="fold-main--title fs-lg text-grey-0">{{ time }}</span>
        <div class="fold-main--info" @click="ObtainHg(index)">
            <span class="fs-lg text-grey-0 mr-1">{{ num }}支</span>
        </div>
    </div>
    <!-- 摺疊顯示區域 -->

    <!-- 摺疊隱藏區域 -->
    <div class="quiz mx-5 pb-5" id="main_{{index}}">
    　　<div>一、沉着、勇猛，有辨別，不自私。</div>
        <div>二、凡事總須研究，纔會明白。</div>
    </div>
    <!-- 摺疊隱藏區域 -->
</div>
複製代碼

動態高度主要是設置在最外層的盒子，中間兩塊一個是標題以顯示的形式展示，另外一個是主體內容以動態展現的形式呈現。

我這邊設置的起始高度是 64px 隱藏區域是在 64 如下，由於設置了 overflow:hidden 因此第2塊盒子就不會顯示。

綁定點擊事件：

bindEvent() {
   const fold = document.querySelector('.container ');
   fold.addEventListener('click', this.open.bind( this ), false );
}
複製代碼

這裏採用的是事件委託的形式獲取到當前點擊的元素，有不明白的同窗具體百度看看便可。

open( ev ) {
   // 獲取當前點擊的元素
   let tag = ev.target,
       // 獲取第一個盒子的元素 -> 顯示區域
       fold_hg = document.getElementById(`fold_${tag.id}`),
       // 獲取第二個盒子的元素 -> 隱藏區域
       vm = document.getElementById(`main_${tag.id}`);
       
       // 若是點到隱藏區域直接退出
       if ( fold_hg == null || vm == null ) return;

       // 64表明未展開面板 若是等於64就把 顯示區域的高度 + 隱藏區域的高度合併起來達到展開的效果
       if ( fold_hg.offsetHeight == 64 ) {
           fold_hg.style.height = vm.offsetHeight + tag.offsetHeight + 'px';
       } else {
           fold_hg.style.height = 64 + 'px';  // 若是不等於64則表明是打開狀態 再次點擊就收起
       }
}
複製代碼

fold_${tag.id} 代碼塊中出現的此語法對應的是數組的下標，摺疊面板是根據數組渲染出來的，每個面板都對應了一個下標，相似vue的 v-for 在vue中的話直接利用數據響應一改變數據的內容便可發生變化，在上面的demo中的話 須要給每一個盒子標記惟一性，當我點擊時我才能知道我要改變的是哪個元素。以上代碼塊完成能夠套用到 vue uni-app 小程序上，更改實現的語法便可。

---

至此文章分享結束啦！

demo倉庫地址：Callapse