1 <style type="text/css"> 2 body { margin: 0px; padding: 0px; } 3 span{ 4 font-size: 25px; 5 } 6 </style> 7 <body> 8 <div class="menu-wrap"> 9 <span id="icon1" style=" 25px;height: 25px;display: inline-block"></span><a id="a1" href="#none">系统设置</a> 10 <div id="menu1" class="menu"> 11 <ul> 12 <li>系统状态</li> 13 <li>系统运行时间</li> 14 <li>语言设置</li> 15 </ul> 16 </div> 17 </div> 18 <div class="menu-wrap"> 19 <span id="icon2" style=" 25px;height: 25px;display: inline-block"></span> <a id="a2" href="#none">新闻管理</a> 20 <div id="menu2" class="menu"> 21 <ul> 22 <li>添加新闻</li> 23 <li>修改新闻</li> 24 <li>删除新闻</li> 25 </ul> 26 </div> 27 </div> 28 <div class="menu-wrap"> 29 <span id="icon3" style=" 25px;height: 25px;display: inline-block"></span><a id="a3" href="#none">订单管理</a> 30 <div id="menu3" class="menu"> 31 <ul> 32 <li>发货管理</li> 33 <li>查询订单</li> 34 <li>打印订单</li> 35 </ul> 36 </div> 37 </div> 38 <div class="menu-wrap"> 39 <span id="icon4" style=" 25px;height: 25px;display: inline-block"></span><a id="a4" href="#none">员工管理</a> 40 <div id="menu4" class="menu"> 41 <ul> 42 <li>添加员工</li> 43 <li>修改信息</li> 44 <li>查看信息</li> 45 </ul> 46 </div> 47 </div> 48 <div class="menu-wrap"> 49 <span id="icon5" style=" 25px;height: 25px;display: inline-block"></span><a id="a5" href="#none">密码管理</a> 50 <div id="menu5" class="menu" > 51 <ul> 52 <li>密码设置</li> 53 </ul> 54 </div> 55 </div> 56 <script> 57 for (var i = 1; i <= 5; i++) { 58 var btn = document.getElementById('a' + i); 59 btn.addEventListener('click', function (e) { 60 var idStr = e.target.id; 61 var idIndex = idStr.slice(1); 62 setJiaJian(idIndex); 63 }); 64 setJiaJian(i); 65 } 66 function setJiaJian(idIndex) { 67 var menu = document.getElementById('menu' + idIndex); 68 var icon = document.getElementById('icon' + idIndex); 69 var menuDisplay = getStyle(menu, 'display'); 70 if (menuDisplay == 'block') { 71 menu.style.display = 'none'; 72 icon.style.backgroundImage = 'url(image/jia.png)'; 73 } else { 74 menu.style.display = 'block'; 75 icon.style.backgroundImage = 'url(image/jian.png)'; 76 } 77 } 78 79 function getStyle(obj, attr) { 80 if (obj.currentStyle) { 81 return obj.currentStyle[attr]; 82 } else { 83 return getComputedStyle(obj, "伪类")[attr]; 84 } 85 } 86 </script>