手写 Collapse 折叠面板

工作中遇到一个需求,即遍历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 属性妙用
luoqiangweb开发China
文章21
分类10
标签5