最近开个新项目。要使用折叠面板，由于需求比较扯，控件的样式又不便于自定义。
废话不说，先写了个demo，上代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .item_wrap{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <ul> 14 <li> 15 <div class="item">item1</div> 16 <div class="item_wrap">item1item1item1item1item1item1</div> 17 </li> 18 <li> 19 <div class="item">item2</div> 20 <div class="item_wrap">item2item2item2item2item2item2</div> 21 </li> 22 </ul> 23 <script> 24 let items=document.querySelectorAll('.item'),itemWraps=document.querySelectorAll('.item_wrap'); 25 items.forEach((ele,index)=>{ 26 ele.dispBol='false'; //创建一个属性来记录当前面板是否展开 true 展开 false折叠 27 items[index].onclick=((e)=>{ 28 let thisDispBol=e.toElement.dispBol; //先保存thisDisBol。接下来要重置 29 itemsInit(); 30 thisDispBol=='false' ? e.toElement.dispBol='true' : e.toElement.dispBol='false'; 31 repaint(); 32 }); 33 }) 34 function repaint(){ 35 items.forEach((ele,index)=>{ 36 ele.dispBol=='true' ? itemWraps[index].style.display='block' : itemWraps[index].style.display='none'; 37 }) 38 } 39 function itemsInit(){ 40 items.forEach((ele,index)=>{ 41 ele.dispBol='false'; 42 }) 43 } 44 </script> 45 </body> 46 </html>