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="width: 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="width: 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="width: 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="width: 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="width: 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>
时间： 2024-10-23 17:24:57