快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)多級菜單效果

更新時(shí)間：2017年07月25日 09:30:26 作者：diasa

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)多級菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)多級菜單效果展示的具體代碼，供大家參考，具體內(nèi)容如下

具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
    }
    ul,li{
      list-style:none;
    }
    .box{
      margin:10px;
      padding:10px;
      width:300px;
      border:1px dashed #008000;
      /*漸進(jìn)增強(qiáng):首先設(shè)置一個(gè)純色的背景，對于不兼容css3的瀏覽器來說會(huì)使用純色，對于兼容的瀏覽器，我們在下面在額外的增加一些漸變色，這樣會(huì)覆蓋掉上面*/
      background:#ffe470;
      background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
      background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
      background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
      background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
    }
    .box li{
      position:relative;
      line-height:30px;
    }
    .box em{
      position:absolute;
      top:7px;
      left:0;
      width:16px;
      height:16px;
      background:url("img/icon.png") no-repeat -59px -28px;
      cursor:pointer;

    }
    .box span{
      display:block;
      padding-left:20px;
    }
    .box em.open{
      background-position:-42px -28px;
    }
    .box .two{
      margin-left:20px;
    }
    .box .three{
      margin-left:40px;
    }
    .box .four{
      margin-left:60px;
    }
    .box .two,.box .three,.box .four{
      display:none;
    }
  </style>
</head>
<body>
  <div class='box' id='box'>
    <ul>
      <li>
        <em></em>
        <span>第一級第一個(gè)</span>
        <ul class='two'>
          <li><span>第二級第一個(gè)</span></li>
          <li>
            <em></em><span>第二級第二個(gè)</span>
            <ul class='three'>
              <li><span>第三極第一個(gè)</span></li>
              <li><span>第三極第二個(gè)</span></li>
              <li>
                <em></em><span>第三極第三個(gè)</span>
                <ul class='four'>
                  <li><span>第四級第一個(gè)</span></li>
                  <li><span>第四級第二個(gè)</span></li>
                  <li><span>第四級第三個(gè)</span></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <em></em><span>第二級第三個(gè)</span>
            <ul class='three'>
              <li><span>第三級第一個(gè)</span></li>
              <li><span>第三級第二個(gè)</span></li>
              <li><span>第三級第三個(gè)</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <em></em>
        <span>第一級第一個(gè)</span>
        <ul class='two'>
          <li><span>第二級第一個(gè)</span></li>
          <li>
            <em></em><span>第二級第二個(gè)</span>
            <ul class='three'>
              <li><span>第三極第一個(gè)</span></li>
              <li><span>第三極第二個(gè)</span></li>
              <li>
                <em></em><span>第三極第三個(gè)</span>
                <ul class='four'>
                  <li><span>第四級第一個(gè)</span></li>
                  <li><span>第四級第二個(gè)</span></li>
                  <li><span>第四級第三個(gè)</span></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <em></em><span>第二級第三個(gè)</span>
            <ul class='three'>
              <li><span>第三級第一個(gè)</span></li>
              <li><span>第三級第二個(gè)</span></li>
              <li><span>第三級第三個(gè)</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <script>
    var box = document.getElementById('box');
    //把列表中的span(前面有em的span)設(shè)置一個(gè) cursor:pointer的樣式
    var spanList = box.getElementsByTagName("span");
    for(var i = 0;i<spanList.length;i++){
      var curSpan = spanList[i];
      var curPre = utils.prev(curSpan);
      if(curPre && curPre.tagName.toLowerCase()==="em"){
        curSpan.style.cursor = "pointer"
      }

    }
    //使用事件委托實(shí)現(xiàn)我們的操作
    box.onclick = function(e){
      e = e || window.event;
      var tar = e.target || e.srcElement;

      //只有點(diǎn)擊的是em或者span標(biāo)簽，我們才進(jìn)行展開收縮的操作
      if(/^(em|span)$/i.test(tar.tagName)){
        var parent = tar.parentNode;//獲取父親
        var firstUl = utils.children(parent,"ul")[0]//獲取父親子集中的第一個(gè)ul標(biāo)簽
        var oEm = utils.children(parent,"em")[0]
        if(firstUl){
          //如果隱藏讓顯示，否則讓隱藏
          var isBlock = utils.getCss(firstUl,"display") === "block" ? true : false;
          if(isBlock){
            firstUl.style.display = "none";
            if(oEm){
              utils.removeClass(oEm,"open")
            }
            //當(dāng)外層的收起，里層所有的ul都要隱藏，所有的em都要移除open樣式
            var allUl = parent.getElementsByTagName("ul"),allEm = parent.getElementsByTagName("em");
            for(var i = 0;i<allUl.length;i++){
              allUl[i].style.display = "none";
              utils.removeClass(allEm[i],"open");
            }
          }else{
            firstUl.style.display = "block";
            if(oEm){
              utils.addClass(oEm,"open")
            }
          }
        }

      }
    }
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

???????Rxjs?map,?mergeMap?和?switchMap?的區(qū)別與聯(lián)系
這篇文章主要介紹了???????Rxjs?map,mergeMap和switchMap的區(qū)別與聯(lián)系，map、mergeMap和switchMap是RxJS中的三個(gè)主要運(yùn)算符，在SAP?Spartacus開發(fā)中有著廣泛的使用場景
2022-07-07
JavaScript插入動(dòng)態(tài)樣式實(shí)現(xiàn)代碼
能夠把CSS樣式包含到HTML頁面中的元素有兩個(gè)。其中，<link>元素用于包含來自外部的文件，而<style>元素用于指定嵌入的樣式
2012-02-02
JavaScript簡單編程實(shí)例學(xué)習(xí)
在本篇文章里小編給大家整理的是關(guān)于JavaScript簡單編程實(shí)例學(xué)習(xí)內(nèi)容，有興趣的朋友們可以參考下。
2020-02-02
Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
js實(shí)現(xiàn)的實(shí)時(shí)柱狀圖,非常有創(chuàng)意的想法。
2008-10-10
讓 JavaScript 輕松支持函數(shù)重載 (Part 2 - 實(shí)現(xiàn))
在上一篇文章里，我們設(shè)計(jì)了一套能在JavaScript中描述函數(shù)重載的方法，這套方法依賴于一個(gè)叫做Overload的靜態(tài)類，現(xiàn)在我們就來看看如何實(shí)現(xiàn)這個(gè)靜態(tài)類。
2009-08-08
本文主要介紹了javascript中面向?qū)ο蟮南嚓P(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-03-03