标签：
代码
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>
实现效果
标签：
原文地址：http://www.cnblogs.com/weilantiankong/p/4684254.html
