html之二级菜单

来源：互联网发布：mysql手册中文版 pdf 编辑：程序博客网时间：2024/04/30 06:34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8"/>
<style type="text/css">
   *{
       margin:0px;
       padding:0px;
   }
   ul li li{
      padding-left:20px;
   }
   ul li span{
      cursor:pointer;
   }
    .dispear{
       display:none;
   }
</style>
</head>

<body>
<ul>
    <li><span onclick="toggle(this)">部门管理</span>
       <ul>
           <li>添加部门</li>   <li>删除部门</li>
           <li>浏览部门</li>
       </ul>
   </li>
   <li><span onclick="toggle(this)">员工管理</span>
       <ul class="dispear">
           <li>添加员工</li>   <li>删除员工</li>
           <li>查询员工</li>
       </ul>
   </li>
   <li><span onclick="toggle(this)">考勤管理</span>
       <ul class="dispear">
           <li>导出考勤</li>   <li>恢复考勤</li>
           <li>按员工查找</li>
       </ul>
   </li>
</ul>
<script type="text/javascript">
   function toggle(span)
   {
      //先移除所有ul的class属性
      var ulList=document.querySelectorAll('ul li ul');
      for(var i=0;i<ulList.length;i++){
       var ul1=ulList[i];
       if(!ul1.hasAttribute('class')){
           var anode=document.createAttribute('class');
           anode.value='dispear';
           ul1.setAttributeNode(anode);
       }
      }

      var ul= span.nextElementSibling;
      if(ul.hasAttribute('class'))
      {
          ul.removeAttribute('class');
      }else{

          var anode=document.createAttribute('class');
          anode.value='dispear';
          ul.setAttributeNode(anode);
      }


   }

</script>
</body>
</html>

0 0