javascript 文件下拉菜单 js显示下拉菜单

转载

ctaxnews 2023-06-08 10:24:32

文章标签 javascript 文件下拉菜单原创二级菜单 html css 文章分类 JavaScript 前端开发

知识点

onmouseover 鼠标经过
onmouseout 鼠标移出
function 关键字
getElementsByTagName 获取一组标签
length 获取对象成员个数

思路
给一级菜单添加鼠标事件，经鼠标在一级菜单上时，显示下面的二级菜单。但是在处理二级菜单之前，先通过 length 判断一下有没有二级菜单。

为什么要判断？
因为比如像 ul.getElementsByTagName('li') 这样的方式获取到的是所有 ul 下面的所有 li，这个 li 可能有很多层。

完整代码

<!--
Author: XiaoWen
Create a file: 2017-02-27 11:24:01
Last modified: 2017-02-27 16:22:00
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #nav{
      background: #eee;
      width: 600px;
      height: 40px;
      margin: 0 auto;
    }
    ul{
      list-style:none;
    }
    ul li{
      float: left;
      line-height: 40px;
      text-align: center;
      position: relative;
    }
    a{
      text-decoration: none;
      color: #000;
      display: block;
      padding: 0 10px;
      height: 40px;
    }
    a:hover{
      color: #fff;
      background: #666;
    }
    ul li ul li{
      float: none;
      background: #eee;
      margin-top: 2px;
    }
    ul li ul{
      position: absolute;
      left: 0;
      top: 40px;
    }
    ul li ul li a{
      width: 80px;
    }
    ul li ul li a:hover{
      background: #06f;
    }
    ul li ul{
       display: none;
    }
    ul li:hover ul{
      /* display: block; */
    }
  </style>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="#">一级菜单1</a></li>
    <li><a href="#">一级菜单2</a></li>
    <li>
      <a href="#">一级菜单3</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li><a href="#">二级菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单4</a></li>
    <li><a href="#">一级菜单5</a></li>
    <li><a href="#">一级菜单6</a></li>
  </ul>
</div>
<script>
window.onload=function(){
  var a_li=document.getElementsByTagName('li');
  for(var i=0;i<a_li.length;i++){
    //获取 li 下面的 二级菜单 ul ，
    //如果能获取到的个数是 1 个以上，
    //条件成立，把 li 下面 的 二级菜单 ul 显示。
    if(a_li[i].getElementsByTagName('ul').length){
      a_li[i].onmouseover=function(){
        this.getElementsByTagName('ul')[0].style.display="block"
      }
      a_li[i].onmouseout=function(){
        this.getElementsByTagName('ul')[0].style.display="none"
      }
    }
  }
}
</script>
</body>
</html>