基于JavaScript实现多级菜单效果

网络编程 2024/7/27 佚名

3 2 1

本文实例为大家分享了js实现多级菜单效果展示的具体代码，供大家参考，具体内容如下

具体代码如下：

<!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;
      /*渐进增强:首先设置一个纯色的背景，对于不兼容css3的浏览器来说会使用纯色，对于兼容的浏览器，我们在下面在额外的增加一些渐变色，这样会覆盖掉上面*/
      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>第一级第一个</span>
        <ul class='two'>
          <li><span>第二级第一个</span></li>
          <li>
            <em></em><span>第二级第二个</span>
            <ul class='three'>
              <li><span>第三极第一个</span></li>
              <li><span>第三极第二个</span></li>
              <li>
                <em></em><span>第三极第三个</span>
                <ul class='four'>
                  <li><span>第四级第一个</span></li>
                  <li><span>第四级第二个</span></li>
                  <li><span>第四级第三个</span></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <em></em><span>第二级第三个</span>
            <ul class='three'>
              <li><span>第三级第一个</span></li>
              <li><span>第三级第二个</span></li>
              <li><span>第三级第三个</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <em></em>
        <span>第一级第一个</span>
        <ul class='two'>
          <li><span>第二级第一个</span></li>
          <li>
            <em></em><span>第二级第二个</span>
            <ul class='three'>
              <li><span>第三极第一个</span></li>
              <li><span>第三极第二个</span></li>
              <li>
                <em></em><span>第三极第三个</span>
                <ul class='four'>
                  <li><span>第四级第一个</span></li>
                  <li><span>第四级第二个</span></li>
                  <li><span>第四级第三个</span></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <em></em><span>第二级第三个</span>
            <ul class='three'>
              <li><span>第三级第一个</span></li>
              <li><span>第三级第二个</span></li>
              <li><span>第三级第三个</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <script>
    var box = document.getElementById('box');
    //把列表中的span(前面有em的span)设置一个 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"
      }

    }
    //使用事件委托实现我们的操作
    box.onclick = function(e){
      e = e || window.event;
      var tar = e.target || e.srcElement;

      //只有点击的是em或者span标签，我们才进行展开收缩的操作
      if(/^(em|span)$/i.test(tar.tagName)){
        var parent = tar.parentNode;//获取父亲
        var firstUl = utils.children(parent,"ul")[0]//获取父亲子集中的第一个ul标签
        var oEm = utils.children(parent,"em")[0]
        if(firstUl){
          //如果隐藏让显示，否则让隐藏
          var isBlock = utils.getCss(firstUl,"display") === "block" "none";
            if(oEm){
              utils.removeClass(oEm,"open")
            }
            //当外层的收起，里层所有的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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,多级菜单,菜单

标签：

js,多级菜单,菜单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“基于JavaScript实现多级菜单效果”

基于JavaScript实现多级菜单效果

暂无“基于JavaScript实现多级菜单效果”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

基于JavaScript实现多级菜单效果

js,多级菜单,菜单

js事件委托和事件代理案例分享

简单谈谈React中的路由系统

评论“基于JavaScript实现多级菜单效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

基于JavaScript实现多级菜单效果

js,多级菜单,菜单

js事件委托和事件代理案例分享

简单谈谈React中的路由系统

评论“基于JavaScript实现多级菜单效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存