基于JavaScript实现多级菜单效果


Posted in Javascript onJuly 25, 2017

本文实例为大家分享了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" ? true : false;
          if(isBlock){
            firstUl.style.display = "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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 全角转半角部分
Oct 28 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
javascript表单正则应用
Feb 04 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
简单谈谈React中的路由系统
Jul 25 #Javascript
老生常谈js中的MVC
Jul 25 #Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 #Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 #Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 #Javascript
基于JavaScript实现百度搜索框效果
Jun 28 #Javascript
深入理解基于vue-cli的vuex配置
Jul 24 #Javascript
You might like
奇怪的PHP引用效率问题分析
2012/03/23 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php表单处理操作
2017/11/16 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
js实现弹窗效果
2020/08/09 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
javascript实现数字时钟效果
2021/02/06 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python restful框架接口开发实现
2020/04/13 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
中青班党性分析材料
2014/02/16 职场文书
对教师的评语
2014/04/28 职场文书
安全生产月演讲稿
2014/05/09 职场文书
医学求职信
2014/05/28 职场文书
关于安全的标语
2014/06/10 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android