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

最新推荐文章于 2023-05-01 22:25:10 发布

weixin_30325971

最新推荐文章于 2023-05-01 22:25:10 发布

阅读量583

点赞数

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/zym0m/p/7067085.html

版权

 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>

转载于:https://www.cnblogs.com/zym0m/p/7067085.html

weixin_30325971

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实例之左侧菜单下拉效果，实现左侧菜单栏点击打开关闭效果

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:...
复制链接

扫一扫