js实例之制作多个下拉子菜单，实现下拉菜单显示和隐藏效果
Posted 为伊消得
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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: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" onmouseover="show(‘chanpin‘)" onmouseout="hide(‘chanpin‘)">产品</div> 19 <div class="erji"> 20 <div class="erwai" id="chanpin" onmouseover="xianshi(‘chanpin‘)" onmouseout="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" onmouseover="show(‘xinwen‘)" onmouseout="hide(‘xinwen‘)">新闻</div> 27 <div class="erji"> 28 <div class="erwai" id="xinwen" onmouseover="xianshi(‘xinwen‘)" onmouseout="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" onmouseover="show(‘lianxi‘)" onmouseout="hide(‘lianxi‘)">联系</div> 35 <div class="erji"> 36 <div class="erwai" id="lianxi" onmouseover="xianshi(‘lianxi‘)" onmouseout="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实例之制作多个下拉子菜单，实现下拉菜单显示和隐藏效果的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Bootstrap 下拉子菜单设置为“dropup”