不管是在导航栏还是顶部的功能条，基本都会用到二级菜单或者三级菜单等等，今天，就使用原生JS来实现这种功能，我个人加上了定时器，用户体验会更好。

HTML:

　　　1.  布局清晰

　　　2.　所有的li 都是相对定位

　　　3.  所有的子级列表ul 都是绝对定位

JS分析：

　　　1.  首先获取下拉菜单中的所以的li，然后遍历li，给每一个li加事件，清除定时器 ，不要忘记

　　　2.  事件内套一个setTimeout() ，用来延迟下级菜单的显示时间，防止操作二级菜单，这其中自执行函数或者var that = this 都可以，防止i值错误

　　　3.  获取当前li 下面的第一个ul列表，也就是下级菜单

　　　4.  判断这个ul 列表是否存在，存在就它显示 .   这是关键

　　　5. 鼠标移出事件和移入事件基本一样，移出让当前li下的ul 隐藏。

　　整体来说，二级菜单没有很强的逻辑性，但是对于初学者来说，这种无限下拉菜单，也并不是很简单，咋一看好像很难，但是希望你踏出这一步。还有一点就是，你的脑子里必须有清晰html结构，元素先不要隐藏，看清楚你的布局。把结构都写清楚了，那么对写js部分也是很有帮助的

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style>
 7 *{ margin:0; padding:0; list-style:none;}
 8 #ul1 li{ width:100px; height:30px; line-height:30px; text-align:center; float:left; border:1px solid #000; background:#ccc; position:relative;}
 9 #ul1 li:hover{ background:#f60;}
10 .son{  display:none;}
11 .graSon{ display:none;position:absolute; left:100px; top:-1px;}
12
13 </style>
14 <script>
15 window.onload = function(){
16     var oUl1 = document.getElementById('ul1');
17     var aLi = oUl1.getElementsByTagName('li');//获取所以的li
18     var timer = null;//设置定时器
19
20     //遍历所有的li
21     for(var i = 0;i < aLi.length; i++){
22         //给每一个li加鼠标移入事件
23         aLi[i].onmouseover = function(){
24             clearTimeout(this.timer);//先清除定时器
25             var that = this;// 用that 代替this 在定时器中使用
26             this.timer = setTimeout(function(){
27                 //获取当然li下面的第一个ul列表即下级菜单
28                 var oUl =that.getElementsByTagName('ul')[0];
29                 //判断列表是否存在，存在就让它显示
30                 if(oUl){
31                     oUl.style.display = 'block';
32                 }
33             },300);
34         }
35         // 鼠标移出事件
36         aLi[i].onmouseout = function(){
37             clearTimeout(this.timer);
38             var that = this;
39             this.timer = setTimeout(function(){
40                 var oUl =that.getElementsByTagName('ul')[0];
41                 if(oUl){
42                     oUl.style.display = 'none';
43                 }
44             },300);
45         }
46     }
47 }
48 </script>
49 </head>
50 <body>
51 <ul id="ul1">
52     <li>首页</li>
53     <li>
54         <span>公司简介 ▼</span>
55         <ul class="son">
56             <li>大事记</li>
57             <li>
58                 <span>领导致辞 ▶</span>
59                 <ul class="graSon">
60                     <li>
61                         <span>2013年 ▶</span>
62                         <ul class="graSon">
63                             <li>10月份</li>
64                             <li>9月份</li>
65                             <li>8月份</li>
66                         </ul>
67                     </li>
68                     <li>2012年</li>
69                 </ul>
70             </li>
71             <li>企业文化</li>
72         </ul>
73     </li>
74     <li>联系我们</li>
75     <li>
76         <span>产品展示 ▼</span>
77         <ul class="son">
78             <li>康师傅</li>
79             <li>老谭</li>
80             <li>今麦郎</li>
81         </ul>
82     </li>
83 </ul>
84 </body>
85 </html>

转载于:https://www.cnblogs.com/NTWang/p/6241875.html

无限级下拉菜单（树形菜单，二级菜单）相关推荐

  1. CSS+JS实现兼容性很好的无限级下拉菜单

    CSS+JS实现兼容性很好的无限级下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://ww ...

  2. android9裁剪SystemUI桌面下拉quick Settings快捷设置菜单,隐藏settings自动旋转快捷键

    android裁剪桌面下拉quick Settings快捷设置菜单 android隐藏settings自动旋转快捷键,手电,省电,勿扰 系统源码下的\frameworks\base\packages\ ...

  3. 带线的无限级下拉树列表-完整示例篇

    2019独角兽企业重金招聘Python工程师标准>>> 前言: 今天在群里有人问起了我一个比较远古的问题:带线的无限级下拉树列表他运行不起来. 最关键的又扯上了CYQ.Data 框架 ...

  4. 【博主推荐】html下拉框树形（附好看的登录界面）

    文章目录 [博主推荐]html下拉框树形(附好看的登录界面) 下拉框示例 下拉框代码 登录1示例 登录1代码 登录2示例 登录2代码 资源下载 [博主推荐]html下拉框树形(附好看的登录界面) [博 ...

  5. 一级下拉对应多个二级下拉联动

    POI代码实现excel二级下拉联动 一级下拉 二级下拉 核心思想 1.sheet页area0中放数据 一个一级下拉(差旅报销单)对应两个二级下拉(费用明细.出差目的) 第一列放差旅报销单+费用明细, ...

  6. Android11 SystemUI 下拉通知栏取消左右滑动菜单

    NotificationMenuRow.java中 populateMenuViews()方法注释以下内容 /*for (int i = 0; i < menuItems.size(); i++ ...

  7. html中表格怎么实现下拉,wps表格中的二级下拉菜单怎么做

    excel二级联动下拉菜单怎么做 Excel怎么制作二级,三级甚至无限级下拉菜单 以WPS 2019版本为例: 关于Excel怎么制作二级,三级甚至无限级下拉菜单,在WPS「表格(Excel)」中操作 ...

  8. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  9. Office EXCEL 表格如何设置某个单元格是选择项，如何设置二级下拉菜单 MS Office版

    1 做好所有的一级和二级菜单,比如下面第一行都是一级菜单,而每一行下面的所有都是属于他的二级菜单(为了更加直观,我把一级菜单都加粗了,而且二级菜单有多少是多少,不一定要一样多) 2 选中所有内容(包括 ...

  10. Office EXCEL 表格如何设置某个单元格是选择项，如何设置二级下拉菜单 WPS版

    1 做好一级菜单和二级菜单(加粗的第一列就是一级菜单,下面的都是对应的二级菜单),二级菜单的数量可以不一致 2 选择下面一列区域,然后点击公式-指定,只勾选首行,然后点击确定 3 只选择第一列,因为这 ...

最新文章

  1. LeetCode简单题之最长特殊序列 Ⅰ
  2. 在CheckBox中，仅仅允许选择一项
  3. 矩阵元算法科学家谢翔： Rosetta如何连接隐私计算与AI？
  4. 计算机视觉与深度学习 | 基于MATLAB 深度学习工具实现简单的数字分类问题（卷积神经网络）
  5. python画圆形螺旋线_PS画结构素描与示范-金属管道台灯（电脑绘画）
  6. boost::test::string_token_iterator相关的测试程序
  7. 蓝桥杯练习题：对给定整数基于斐波拉契数列构造字符串
  8. php面向对象的接口,PHP面向对象之接口编程
  9. sql server 2014 判断一个列某个字段是否相同_Select * from user的千层套路——一个sql是如何执行的...
  10. k8s集群搭建（一主多从）
  11. Python基于cq-http协议端，使用nonebot2框架制作属于自己的智能机器人
  12. 信息课为什么不叫计算机课,让信息技术课“美”起来
  13. 青龙脚本-趣闲赚（更新）
  14. 【数据结构-堆栈（顺序存储）GO语言实现】
  15. python爬取微博博主历史博文存入Excel
  16. python xmind_2018-09-14 python-xmind文件解析
  17. 小微企业如何通过运营公众号提升业绩？
  18. 好玩的黑科技app：推荐5款功能逆天的黑科技应用！
  19. 百度和360的关键词提交
  20. Haul truck运输卡车专为矿用设计

热门文章

  1. 带checkbox的ListView实现（一）——数据与渲染完全分离的传统实现方式
  2. 打开Visual Studio 2010，左下角显示加载工具箱内容
  3. 关于codesmith及其相关资源－－破解的
  4. ASP.NET【2】
  5. 虚电路方式,数据报方式
  6. Codeforces 295 (Div.1)
  7. 【转】【JLINK下载失败，STLINK下载失败万能解决方案】JLINK和STLINK都无法下载时的解决办法，此时芯片并没有报废...
  8. ios客户端快速滚动和回弹效果的实现
  9. postgress无法远程连接问题解决方案
  10. JS,Jquery获取select,dropdownlist,checkbox 下拉列表框的值