原生JS實(shí)現(xiàn)N級(jí)菜單的代碼

更新時(shí)間：2017年05月21日 17:26:24 作者：盧傳奇

最近有項(xiàng)目要實(shí)現(xiàn)N級(jí)菜單，首先從布局入手，即判斷是否有下級(jí)菜單，具體實(shí)現(xiàn)代碼，大家可以參考下本文

需求分析

簡(jiǎn)單的分析一下，要實(shí)現(xiàn)N級(jí)菜單，首先從布局入手，即判斷是否有下級(jí)菜單

1.沒(méi)有下一級(jí)菜單,直接排列

2.有下級(jí)菜單，又分為下級(jí)菜單排放位置，和在上級(jí)菜單顯示類似 '>' 的符號(hào)，效果如圖:

圖：1

初步實(shí)現(xiàn)

1.實(shí)現(xiàn)是否存在 >

注意：下面凡是擔(dān)憂 xxx===yyy ? xxx : xxx都是利用三元表達(dá)式，來(lái)表達(dá)思路。

ＨＴＭＬ結(jié)構(gòu)如下：

圖：2

•要實(shí)現(xiàn)圖一的效果，我們只需要判斷l(xiāng)i標(biāo)簽里面的children.length===2 ? 'span存在' : 'span移除'

2.下級(jí)菜單出現(xiàn)位置

ＨＴＭＬ結(jié)構(gòu)如下：

•實(shí)現(xiàn)這一需求，也需要判斷children.length===2 ? '上級(jí)菜單相對(duì)定位, top為0，left為上級(jí)的offsetWidth，下級(jí)菜單絕對(duì)定位' : '不做任何處理'

具體代碼即實(shí)現(xià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>一級(jí)菜單
        <span>></span>
      </li>
      <li>一級(jí)菜單
        <span>></span>
        <ul>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二級(jí)菜單
            <span>></span>
          </li>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一級(jí)菜單
        <span>></span>
        <ul>
          <li>二級(jí)菜單
            <span>></span>
          </li>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二級(jí)菜單
            <span>></span>
            <ul>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
              <li>三級(jí)菜單
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一級(jí)菜單
        <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 */
/*
 * 
 * 通過(guò)下面布局中代碼實(shí)現(xiàn)每個(gè) li.children.length 要么為0 要么為2
 * 0 無(wú)下級(jí)菜單
 * 2 有下級(jí)菜單
 * 
 */
for (let i = uls.length - 1; i >= 0; i--) {
  if(uls[i].parentNode.nodeName === "LI") {
    uls[i].parentNode.classList.add("relative"); //相對(duì)定位
    uls[i].classList.add("absolute"); // 絕對(duì)定位
    uls[i].style.left = liWidth + "px"; 
  }
}
for (var i = 0; i < lis.length; i++) {
  if( lis[i].children.length === 1) { //沒(méi)有下一級(jí)菜單直接刪除
    lis[i].children[0].outerHTML = "";
  };
}
/* 布局end */
for (let i = 0; i < lis.length; i++) { // 控制每一個(gè)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實(shí)現(xiàn)N級(jí)菜單的代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: