js+css3手风琴展开收缩下拉菜单代码

js+css3手风琴展开收缩下拉菜单代码

这是一款扁平化风格js+css3手风琴展开收缩下拉菜单代码，带小图标，支持多级子菜单。

1. js代码
   
2. 
   
3. <script>
   
4. var list = document.querySelectorAll('.list');
   
5. 
   
6. function accordion(e) {
   
7.     e.stopPropagation();
   
8.     if (this.classList.contains('active')) {
   
9.         this.classList.remove('active');
   
10.     } else
    
11.     if (this.parentElement.parentElement.classList.contains('active')) {
    
12.         this.classList.add('active');
    
13.     } else
    
14.     {
    
15.         for (i = 0; i < list.length; i++) {
    
16.             list[i].classList.remove('active');
    
17. 
    
18.         }
    
19.         this.classList.add('active');
    
20.     }
    
21. }
    
22. for (i = 0; i < list.length; i++) {
    
23.     list[i].addEventListener('click', accordion);
    
24. }
    
25. </script>

复制代码

js css3手风琴展开收缩下拉菜单代码.zip (2.92 KB, 下载次数: 425)

2021-2-22 15:55 上传

点击文件名下载附件
js+css3手风琴展开收缩下拉菜单代码