首页 > 代码库 > js实例之制作多个下拉子菜单，实现下拉菜单显示和隐藏效果

js实例之制作多个下拉子菜单，实现下拉菜单显示和隐藏效果

2024-10-10 08:27:02   232人阅读

 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 #menu{width:800px;height:40px;margin-top:100px;}
 7 .list{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;float:left;border:1px solid #333;}
 8 .erji{width:0px;height:0px;float:left;}
 9 .erwai{width:100px;height:122px;border:1px solid 
10 #333;position:relative;top:41px;left:-102px; display:none;}
11 .item{width:100px;height:40px;text-align:center;line-height:40px;vertical-align:middle;border-bottom:1px solid #333;}
12 </style>
13 
14 </head>
15 
16 <body>
17 <div id="menu">
18     <div class="list" onm ouseover="show(‘chanpin‘)" onm ouseout="hide(‘chanpin‘)">产品</div>
19     <div class="erji">
20         <div class="erwai" id="chanpin" onm ouseover="xianshi(‘chanpin‘)" onm ouseout="xiaoshi(‘chanpin‘)">
21             <div class="item">食品</div>
22             <div class="item">家电</div>
23             <div class="item">手机</div>
24         </div>
25     </div>
26     <div class="list" onm ouseover="show(‘xinwen‘)" onm ouseout="hide(‘xinwen‘)">新闻</div>
27     <div class="erji">
28         <div class="erwai" id="xinwen" onm ouseover="xianshi(‘xinwen‘)" onm ouseout="xiaoshi(‘xinwen‘)">
29             <div class="item">美食</div>
30             <div class="item">旅游</div>
31             <div class="item">家庭</div>
32         </div>
33     </div>
34     <div class="list" onm ouseover="show(‘lianxi‘)" onm ouseout="hide(‘lianxi‘)">联系</div>
35     <div class="erji">
36         <div class="erwai" id="lianxi" onm ouseover="xianshi(‘lianxi‘)" onm ouseout="xiaoshi(‘lianxi‘)">
37             <div class="item">电话</div>
38             <div class="item">网址</div>
39             <div class="item">地址</div>
40         </div>
41     </div>
42 </div>
43 </body>
44 <script type="text/javascript">
45 function show(id){
46     var a=document.getElementById(id);
47     a.style.display="block";
48 }
49 function hide(id){
50     var a=document.getElementById(id);
51     a.style.display="none";
52 }
53 function xianshi(id){
54     var a=document.getElementById(id);
55     a.style.display="block";
56 }
57 function xiaoshi(id){
58     var a=document.getElementById(id);
59     a.style.display="none";
60 }
61 </script>
62 </html>

 

js实例之制作多个下拉子菜单，实现下拉菜单显示和隐藏效果


联系
我们