通过js实现多个盒子的点击展开或关闭

 

1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>通过js实现多个盒子点击展开闭合</title>
 6         
 7         <script type="text/javascript">
 8             
 9              var boxCondition = true;  //定义盒子初始状态，true则执行展开语句，false则执行闭合语句
10              
11             /*通过鼠标点击决定展开或是闭合盒子*/
12             function mouseClick(x){
13                 var    boxId = document.getElementById("box_0"+x);
14                 
15                 switch(x){
16                     case 1:        /*判断点击的是一号盒子还是二号盒子*/
17                         if(boxCondition == true){    /*判断该执行展开语句还是闭合语句*/
18                             boxId.style="height:160px;";    //展开盒子
19                             boxCondition = false;    //给boxCondition赋予新值,以便鼠标再次点击时,盒子不会执行展开语句,转而执行闭合语句
20                         }else{
21                             boxId.style="height:80px;";        //闭合盒子
22                             boxCondition = true;    //给boxCondition赋予新值,以便鼠标再次点击时,盒子不会执行闭合语句,转而执行展开语句
23                         }
24                         break;
25                     case 2:
26                         if(boxCondition == true){
27                             boxId.style="height:160px;";
28                             boxCondition = false;
29                         }else{
30                             boxId.style="height:80px;";
31                             boxCondition = true;
32                         }
33                         break;
34                 }
35                 
36             }
37             
38                 
39             /*通过获取盒子的高度判断盒子当前处于打开还是关闭状态*/
40             /*通过此函数，能够在展开一号盒子后，鼠标直接移动到二号盒子，此时重新赋值boxCondition，以便二号盒子能够正常打开*/
41             function mouseOver(x){    
42                 var boxId = document.getElementById("box_0"+x);                 
43                 var computedStyle = document.defaultView.getComputedStyle(boxId, null);
44                 var boxHeight = computedStyle.height;    //获取盒子高度
45                 boxHeight = parseInt(boxHeight);    //将盒子高度数值转换为Number类型，因为获取到的高度为转换前为“30px”，是String类型。
46                     if(boxHeight == 80){
47                         boxCondition = true;    //高度为80时，盒子为闭合状态
48                     }else{
49                         boxCondition = false;    //高度不等于80时，盒子为展开状态
50                     }
51             }
52             
53         </script>
54         
55         <style type="text/css">
56             *{
57                 margin: 0;
58                 padding: 0;
59             }
60             a{
61                 position: ;
62             }
63             body{
64                 height: 100vh;
65                 display: flex;
66                 align-items:center;
67             }
68             .boxCss_1{
69                 width: 80px; 
70                 height: 80px;
71                 background-color: aqua;
72                 margin: auto;
73             }
74             .boxCss_2{
75                 width: 80px;
76                 height: 80px;
77                 background-color: #000;
78                 margin: auto;
79             }
80             
81             
82         </style>
83     </head>
84     <body>
85         
86         <div id="box_01" class="boxCss_1" onclick="mouseClick(1)" onmouseover="mouseOver(1)"></div>
87         <div id="box_02" class="boxCss_2" onclick="mouseClick(2)" onmouseover="mouseOver(2)"></div>
88         
89     </body>
90 </html>

新手之作献丑了，如果观看的大佬有更好的方法也可以提出来。