原生JS实现N级菜单的代码


Posted in Javascript onMay 21, 2017

需求分析

简单的分析一下,要实现N级菜单,首先从布局入手,即判断是否有下级菜单

1.没有下一级菜单,直接排列

2.有下级菜单,又分为下级菜单排放位置,和在上级菜单显示类似 '>' 的符号,效果如图:

原生JS实现N级菜单的代码

图:1

 初步实现

1.实现是否存在   >

注意: 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式,来表达思路。

HTML结构如下:

原生JS实现N级菜单的代码

图:2

•要实现图一的效果,我们只需要判断li标签里面的children.length===2 ? 'span存在' : 'span移除'

2.下级菜单出现位置

HTML结构如下:

原生JS实现N级菜单的代码

•实现这一需求,也需要判断children.length===2 ? '上级菜单相对定位, top为0,left为上级的offsetWidth,下级菜单绝对定位' : '不做任何处理'

具体代码即实现

效果图如下:

原生JS实现N级菜单的代码

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      margin: 200px 0 0 50px;
      text-align: center;
      color: #ccc;
    }
    ul {
      list-style: none;
      float: left;
    }
    li {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background-color: #124520;
      border: 1px solid #eee;
      position: relative;
    }
    li span {
      position: absolute;
      top: 0;
      right: 10px;
    }
    li:hover {
      background-color: #666;
      transition: background-color .5s;
    }
    ul {
      display: none;
    }
    ul.first {
      display: block;
    }
    .relative {
      position:relative;
      top: 0;
      left: 0;
    }
    .absolute {
      position: absolute;
      left: 0;
      top: 0;
    }
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul class="first">
      <li>一级菜单
        <span>></span>
      </li>
      <li>一级菜单
        <span>></span>
        <ul>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一级菜单
        <span>></span>
        <ul>
          <li>二级菜单
            <span>></span>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一级菜单
        <span>></span>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript">
let uls = document.querySelectorAll("ul"); //获取所有的ul
let lis = document.querySelectorAll("li"); //获取所有的li
let liWidth = document.querySelector("#box ul").offsetWidth-2 //li的宽度 -2是为了好看
/* 布局start */
/*
 * 
 * 通过下面布局中代码实现每个 li.children.length 要么为0 要么为2
 * 0 无下级菜单
 * 2 有下级菜单
 * 
 */
for (let i = uls.length - 1; i >= 0; i--) {
  if(uls[i].parentNode.nodeName === "LI") {
    uls[i].parentNode.classList.add("relative"); //相对定位
    uls[i].classList.add("absolute"); // 绝对定位
    uls[i].style.left = liWidth + "px"; 
  }
}
for (var i = 0; i < lis.length; i++) {
  if( lis[i].children.length === 1) { //没有下一级菜单直接删除
    lis[i].children[0].outerHTML = "";
  };
}
/* 布局end */
for (let i = 0; i < lis.length; i++) { // 控制每一个li
  lis[i].onmouseover = function() {
    if( lis[i].children.length === 2) {
      this.children[1].classList.remove("hide");
      this.children[1].classList.add("show");
    } 
  }
  lis[i].onmouseout = function() {
    if( lis[i].children.length === 2) {
      this.children[1].classList.remove("show");
      this.children[1].classList.add("hide");
    }
  }
}
</script>
</html>

以上所述是小编给大家介绍的原生JS实现N级菜单的代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
Angular4 反向代理Details实践
May 30 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 #Javascript
详解Angular2中Input和Output用法及示例
May 21 #Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
You might like
解析php中反射的应用
2013/06/18 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
js轮播图代码分享
2016/07/14 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python获取指定时间差的时间实例详解
2017/04/11 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
解决python flask中config配置管理的问题
2019/07/26 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python常用数据重复项处理方法
2019/11/22 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
关于爱情的广播稿
2014/01/16 职场文书
英文自荐信常用句子
2014/03/26 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
美元符号 $
2022/02/17 杂记