UDN-企业互联网技术人气社区

板块导航

浏览  : 679
回复  : 2

[原生js] 无限级下拉菜单(树形菜单,二级菜单)

[复制链接]
小辫儿的头像 楼主
发表于 2017-1-7 15:00:48 | 显示全部楼层 |阅读模式
  不管是在导航栏还是顶部的功能条,基本都会用到二级菜单或者三级菜单等等,今天,就使用原生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. </style>
  13. <script>
  14. window.onload = function(){
  15.     var oUl1 = document.getElementById('ul1');
  16.     var aLi = oUl1.getElementsByTagName('li');//获取所以的li
  17.     var timer = null;//设置定时器

  18.     //遍历所有的li
  19.     for(var i = 0;i < aLi.length; i++){
  20.         //给每一个li加鼠标移入事件
  21.         aLi[i].onmouseover = function(){
  22.             clearTimeout(this.timer);//先清除定时器
  23.             var that = this;// 用that 代替this 在定时器中使用
  24.             this.timer = setTimeout(function(){
  25.                 //获取当然li下面的第一个ul列表即下级菜单
  26.                 var oUl =that.getElementsByTagName('ul')[0];
  27.                 //判断列表是否存在,存在就让它显示
  28.                 if(oUl){
  29.                     oUl.style.display = 'block';   
  30.                 }        
  31.             },300);
  32.         }
  33.         // 鼠标移出事件  
  34.         aLi[i].onmouseout = function(){
  35.             clearTimeout(this.timer);
  36.             var that = this;
  37.             this.timer = setTimeout(function(){
  38.                 var oUl =that.getElementsByTagName('ul')[0];
  39.                 if(oUl){
  40.                     oUl.style.display = 'none';   
  41.                 }        
  42.             },300);
  43.         }   
  44.     }
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <ul id="ul1">
  50.     <li>首页</li>
  51.     <li>
  52.         <span>公司简介 ▼</span>
  53.         <ul class="son">
  54.             <li>大事记</li>
  55.             <li>
  56.                 <span>领导致辞 ▶</span>
  57.                 <ul class="graSon">
  58.                     <li>
  59.                         <span>2013年 ▶</span>
  60.                         <ul class="graSon">
  61.                             <li>10月份</li>
  62.                             <li>9月份</li>
  63.                             <li>8月份</li>
  64.                         </ul>
  65.                     </li>
  66.                     <li>2012年</li>
  67.                 </ul>
  68.             </li>
  69.             <li>企业文化</li>
  70.         </ul>
  71.     </li>
  72.     <li>联系我们</li>
  73.     <li>
  74.         <span>产品展示 ▼</span>
  75.         <ul class="son">
  76.             <li>康师傅</li>
  77.             <li>老谭</li>
  78.             <li>今麦郎</li>
  79.         </ul>
  80.     </li>
  81. </ul>
  82. </body>
  83. </html>
复制代码

相关帖子

发表于 2017-1-7 15:01:19 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2017-1-7 15:01:20 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部