指引网

当前位置: 主页 > 网页制作 > JavaScript >

利用 document.getElementById实现简单下拉菜单

来源:网络 作者:佚名 点击: 时间:2017-07-02 08:59
[摘要]  今天我们用最简单的方法来实现下拉菜单效果,利用了js的document.getElementById来获取id再对要显示的层作显示隐藏处理就KO了。
 代码如下 复制代码


<html>
     <head>
           <title>下拉菜单</title>
     </head>
     <script type="text/javascript">
 
    function doShow(id){
 
 var did=document.getElementById("ul"+id);   //获得ul的id
 
  if(did.style.display=="none"){
             did.style.display="block";   //设置ul显示
     }else{                     
          did.style.display="none";    //设置ul隐藏
     }
 
    }

       </script>
     <!--CSS-->
     <style type="text/css">
      body{
      font-size:12px;
      }
   ul{
    list-style:none;
   
   }
     </style>
     <body>
         <div style="background:#D6DFF7; width:100px;">
  
            <div onClick="doShow(1)" style=" font-weight:700;">[-系统管理-]</div>
                <ul id="ul1">  
                    <li>首页管理</li>
     <li>账户管理</li>
     <li>版权管理</li>
     <li>数据备份</li>
     <li>系统信息</li>
     <li>友情连接</li>
                </ul>
   
   <div onClick="doShow(2)" style=" font-weight:700;">[-新闻管理-]</div>
                <ul id="ul2">  
                    <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
                </ul>
   
   <div onClick="doShow(3)" style=" font-weight:700;">[-网站管理-]</div>
                <ul id="ul3">  
                    <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
     <li>首页管理</li>
                </ul>
        
  
   </div>
     </body>
</html>

------分隔线----------------------------