代码 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5
6 <style>
7 #bigbox{width: 220px;background: #f2f2f2;padding: 0 1px;}
8 .box{width: 100%;background: #CCCCCC;font-family: "microsoft yahei";line-height: 40px;color: white;text-align: center;border-bottom: 1px solid #aaa;border-left: 4px solid blue;cursor: pointer;}
9 .box:first-child{border-top: 1px solid #aaa;}
10 .box:hover{background: #ddd;}
11 ul{list-style: none;padding: 0;}
12 .content{display: none;}
13 .content li{padding: 5px 0 5px 40px;cursor: pointer;}
14 .content li:hover{background: #AAAAAA;}
15 </style>
16 <script>
17 window.onload = function () {
18 var box = document.getElementsByClassName("box");
19 var content = document.getElementsByClassName("content");
20 for (var i = 0, j = box.length; i < j; i++) {
21 box[i].index = i;
22 box[i].onclick = function () {
23 mm = content[this.index];
24 xx = window.getComputedStyle(mm).display;
25 for (var v = 0; v < j; v++) {
26 content[v].style.display = "none"
27 };
28 if (xx == "none") {
29 mm.style.display = "block"
30 } else {
31 mm.style.display = "none"
32 }
33 }
34 }}
35 </script>
36
37 <title>原生javascript手风琴导航</title>
38
39 </head>
40 <body>
41 <div id="bigbox">
42 <div class="box">甲甲甲甲甲甲甲甲甲甲</div>
43 <ul class="content">
44 <li>aaaaaaaaaaaaaaaa</li>
45 <li>bbbbbbbbbbbbbbbb</li>
46 <li>cccccccccccccccc</li>
47 <li>ddddddddddddddddd</li>
48 </ul>
49 <div class="box">乙乙乙乙乙乙乙乙乙乙</div>
50 <ul class="content">
51 <li>aaaaaaaaaaaaaaaa</li>
52 <li>bbbbbbbbbbbbbbbb</li>
53 <li>cccccccccccccccc</li>
54 <li>ddddddddddddddddd</li>
55 </ul>
56 <div class="box">丙丙丙丙丙丙丙丙丙丙</div>
57 <ul class="content">
58 <li>aaaaaaaaaaaaaaaa</li>
59 <li>bbbbbbbbbbbbbbbb</li>
60 <li>cccccccccccccccc</li>
61 <li>ddddddddddddddddd</li>
62 </ul>
63 <div class="box">丁丁丁丁丁丁丁丁丁丁</div>
64 <ul class="content">
65 <li>aaaaaaaaaaaaaaaa</li>
66 <li>bbbbbbbbbbbbbbbb</li>
67 <li>cccccccccccccccc</li>
68 <li>ddddddddddddddddd</li>
69 </ul>
70 </div>
71 </body>
72 </html>
实现效果
时间： 2024-10-13 11:59:29