基于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 相关文章推荐
jquery maxlength使用说明
Sep 09 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
js实现拖拽与碰撞检测
Sep 18 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
市政工程技术专业自荐书
2014/07/06 职场文书
1000字打架检讨书
2014/11/03 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
土建施工员岗位职责
2015/04/11 职场文书