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

站长资源 2024/12/24 佚名

28 1538 28

铁雪资源网 Design By www.gsvan.com

需求分析

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

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

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

图：1

初步实现

1.实现是否存在 >

注意：下面凡是担忧 xxx===yyy "text-align: center">

图：2

"text-align: center">

"color: #ff0000">具体代码即实现

效果图如下：

代码如下：

<!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级菜单的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

js,实现n级菜单

标签：

js,实现n级菜单

铁雪资源网 Design By www.gsvan.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

铁雪资源网 Design By www.gsvan.com

评论“原生JS实现N级菜单的代码”

暂无原生JS实现N级菜单的代码的评论...

www.gsvan.com 铁雪资源网

39,976影音资源

144,792福利资源

1,817软件资源

431,128技术资源

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

js,实现n级菜单

JQuery 封装 Ajax 常用方法(推荐)

Ionic + Angular.js实现图片轮播的方法示例

评论“原生JS实现N级菜单的代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接