知识点

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>

总结

css 中的鼠标伪类已经注释了的 ul li:hover ul{/* display: block; */} ，现在是用 js 实现，所以用不着这个鼠标伪类了。

通过这种方法写的 js 下拉菜单，可以避免 ie6 下的不支持非 a 标签伪类的情况。

-第2章 JS方法实现下拉菜单显示和隐藏的更多相关文章

  1. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

  2. -第1章 HTMLCSS方法实现下拉菜单

    中英文的自动换行问题 把下面代码中的 javascript 改成 子菜单1 试试, 如果英文的话宽度会自动撑开, 用中文不会, 而直接转行下来. <ul> <li><a ...

  3. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  4. IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...

  5. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  6. layui编辑商品时，怎么使用下拉菜单显示商品默认分类的问题

    //加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...

  7. django 下拉菜单显示为object的解决办法

    在创建完Django数据库结构之后,使用Django自带的强大的admin功能往数据库中添加数据,图形化界面如下: 但时候有下拉框选项(只要在model中有定义Charfield就会显示为下拉框),如 ...

  8. 下拉框 显示name 隐藏code

    暂未做详细整理, 后期有机会完善 jsp 是否有效: <s:select id="queryIsValid" name="configBean.queryIsVal ...

  9. js代码实现下拉菜单

    效果 js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = ...

随机推荐

  1. 编程中的链式调用：Scala示例

    编程中的链式调用与Linux Shell 中的管道类似.Linux Shell 中的管道 ,会将管道连接的上一个程序的结果, 传递给管道连接的下一个程序作为参数进行处理,依次串联起N个实用程序形成流水 ...

  2. 大数据是什么？它和Hadoop又有什么联系？

    随着近几年计算机技术和互联网的发展,“大数据”这个名词越来越多进入我们的视野.大数据的快速发展也在无时无刻影响着我们的生活. 那大数据究竟是什么呢? 首先,看看专家是怎么解释大数据的: 大数据就是多, ...

  3. Linux基础命令---chfn

    chfn chfn指令可以改变通过finger指令查看到的信息.此信息存储在/etc/passwd文件中,并由Finger程序显示.LinuxFinger命令将显示可由chfn更改的四条信息:您的真名 ...

  4. Oracle 数据库实现数据合并：merge

    1.使用update进行数据更新 1)最简单的更新 update tablea a set a.price=1.00 2)带条件的数据更新 update tablea a set a.price = ...

  5. 使用json对象要注意的地方

    本人是初学渣渣,使用json过程中遇到常见的问题,总结如下: 1--json对象内部不要有注释,虽然不报错,但是会使得渲染界面失败: 2--json对象是没有length属性的,若想获取到这个leng ...

  6. IE haslayout的属性及其值

    haslayout是IE 渲染引擎的一个内部组成部分.在IE 中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.为了调节这两个不同的概念,渲染引擎采用了hasl ...

  7. 每日linux命令学习-grep模式检索

    grep模式检索指令包括grep,egrep,和fgrep,.Linux系统使用正则表达式优化文本检索,所以在此,笔者首先学习了一下正则表达式. 1. 正则表达式 正则表达式使用被称为元字符(Meta ...

  8. Java基础再复习(继承、多态、方法内部类**、HashMap用法**、参数传递**)

    ###继承: package com.shiyan; public class Animal { public int legNum; //动物四肢的数量 //类方法 public void bark ...

  9. 【题解】 Luogu P4312 / SP4155 [COCI 2009] OTOCI / 极地旅行社

    原题地址:P4312 [COCI 2009] OTOCI / 极地旅行社/SP4155 OTOCI - OTOCI lct入门难度的题,十分弱智(小蒟蒻说lct是什么,能吃吗?) bridge操作判联 ...

  10. android 导出apk

    一个困扰了几个月的问题在今天得以解决,运动益智可能有点过,能让一个人思路清晰倒是真! 问题描述:本地调试运行及不加密导出apk运行正常,当加密生成apk安装后,从接口返回的数据总是空.尝试过各种配置, ...