基于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学习资源站点
Aug 29 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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/02/04 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php实现telnet功能示例
2014/04/08 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
JS实现小米轮播图
2020/09/21 Javascript
python局部赋值的规则
2013/03/07 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python中reader的next用法
2018/07/24 Python
Python3常用内置方法代码实例
2019/11/18 Python
python实现飞行棋游戏
2020/02/05 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
pytorch中index_select()的用法详解
2021/01/06 Python
摄影专业毕业生求职信
2014/03/13 职场文书
可怜妈妈观后感
2015/06/09 职场文书
技术入股协议书
2016/03/22 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
python单元测试之pytest的使用
2021/06/07 Python
基于Python实现股票收益率分析
2022/04/02 Python
vue router 动态路由清除方式
2022/05/25 Vue.js