基于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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 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 导出Excel示例分享
2014/08/18 PHP
文字幻灯片
2006/06/26 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
es6数值的扩展方法
2019/03/11 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python简单获取数组元素个数的方法
2015/07/13 Python
Python反转序列的方法实例分析
2018/03/21 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
敬老模范事迹
2014/05/21 职场文书
统计学教授推荐信
2014/09/18 职场文书
介绍信模板
2015/01/31 职场文书