首页 > 代码库 > 为多菜单折叠效果，设置+-符号，标识当前菜单是否展开

为多菜单折叠效果，设置+-符号，标识当前菜单是否展开

2024-09-17 11:06:44   216人阅读

 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="http://www.mamicode.com/#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="http://www.mamicode.com/#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="http://www.mamicode.com/#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="http://www.mamicode.com/#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="http://www.mamicode.com/#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>

 

为多菜单折叠效果，设置+-符号，标识当前菜单是否展开


联系
我们