最近開個新項目。要使用折疊面板，由於需求比較扯，控件的樣式又不便於自定義。
廢話不說，先寫了個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>