首页 > 代码库 > JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果

JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果

2024-10-10 09:41:39   215人阅读

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 *{margin:0px auto; padding:0px;}
 6 #wai{width:200px; height:500px; margin-top:100px;}
 7 
 8 .list{width:200px; height:20px; background-color:#999; text-align:center; line-height:20px; vertical-align:middle; color:#FFF; margin:2px;}
 9 
10 .erji{width:200px; height:40px;}
11 
12 .xiala{width:200px; height:20px; background-color:white; text-align:center; line-height:20px; vertical-align:middle; color:black;}
13 </style>
14 </head>
15 
16 <body>
17 <div id="wai">
18     <div class="list" onclick="show(‘xinwen‘)" >点开</div>
19     <div class="erji" id="xinwen" style="display:none">
20         <div class="xiala">新闻</div>
21         <div class="xiala">图片</div>
22     </div>
23        
24     <div class="list" onclick="show(‘junshi‘)" >点开</div>
25     <div class="erji" id="junshi" style="display:none">
26         <div class="xiala">军事</div>
27         <div class="xiala">科技</div>
28     </div>
29     
30     <div class="list" onclick="show(‘meishi‘)" >点开</div>
31     <div class="erji" id="meishi" style="display:none">
32         <div class="xiala">美食</div>
33         <div class="xiala">旅游</div>
34     </div>
35     
36     <div class="list" onclick="show(‘jiating‘)" >点开</div>
37     <div class="erji" id="jiating" style="display:none">
38         <div class="xiala">家庭</div>
39         <div class="xiala">宠物</div>
40     </div>
41 </div>
42 
43 </body>
44 <script type="text/javascript">
45 
46 function show(id){
47     var a=document.getElementById(id);
48     if(a.style.display=="none"){
49         a.style.display ="block";
50     }else{
51         a.style.display ="none";
52     }
53 }
54 
55 </script>
56 </html>

技术分享技术分享

JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果


联系
我们