通过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>
新手之作献丑了，如果观看的大佬有更好的方法也可以提出来。