手写 Collapse 折叠面板
10个月前前端阅读 284

工作中遇到一个需求，即遍历Collapse 折叠面板。首先在Elment-UI查找折叠面板组件，发现其不满足需求，于是手写了一个。

使用的关键知识点：classList API

Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。

ElementClasses 是一个 DOMTokenList 表示 elementNodeReference 的类属性 。

虽然 element.classList 本身是只读的，但是你可以使用 add() 、remove()、toggle() 方法修改它。

点代码如下：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    .icon-arrow {
        cursor: pointer;
        transform: rotate(0turn);
        transition: transform 0.3s;
    }
    .icon-arrow-expand {
        transform: rotate(0.25turn);
    }
    
    .content{
        width: 400px;
        height: 200px;
        background-color: greenyellow;
        transition: height 0.3s ease-in-out;
        overflow: auto hidden;
    }
    .content-collapse {
      overflow: hidden;
      height:0px;
    }
  </style>
  
  <script>
    // 展开/收缩
    function clickArrow() {
      const arrowEle = document.getElementById('arrow');
      const contentEle = document.getElementById('content');
      arrowEle.classList.toggle("icon-arrow-expand");
      contentEle.classList.toggle("content-collapse");
    }
  </script>
  
</head>
<body>
  
  <!-- 箭头-->
  <svg
    id="arrow"
    class="icon-arrow"
    onclick="clickArrow()"
    viewBox="0 0 1024 1024"
    width="24"
    height="24"
  >
    <path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="1269"></path>
  </svg>
  
  <!-- 展开区-->
  <div id="content" class="content content-collapse">
    
  </div>
  
</body>
</html>

效果如下：
8888888.gif

公共组件库（持续更新）
CSS background-clip 属性妙用
luoqiang强web开发China
文章22
分类11
标签5