js实现折叠面板

最近开个新项目。要使用折叠面板，由于需求比较扯，控件的样式又不便于自定义。

废话不说，先写了个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>

 

posted on 2018-04-03 10:42  yanggg  阅读(9127)  评论(0)  编辑  收藏  举报

导航