基于jquery实现多级菜单效果


Posted in jQuery onJuly 25, 2017

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

<!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 = $('#box');
  $box.find("span").each(function(index,item){
   var $pre = $(this).prev();
   if($pre[0] && $pre[0].tagName.toLowerCase()==="em"){
    $(this).css("cursor","pointer");
   }
  })
  //jQuery里面除了bind、unbind、on、off、click这些绑定事件的方式外,还提供了一种delegate(1.7版本以前用的是live)

  function fn(){
   var $par = $(this).parent();
   var $ul = $($par.children('ul')[0]);
   var $em = $($par.children('em')[0]);
   if($ul.length>0){
    
    $ul.toggle();
    $em.toggleClass("open");
    var isBlock = $ul.css('display')==="block"?true:false;
    //如果当前的是收缩的话,我们需要把子子孙孙中所有的ul/em都隐藏和移除open样式
    if(isBlock){
     $par.find('ul').css("display","none");
     $par.find("em").removeClass("open");
    }
   }
  }

  $box.delegate('em',"click",fn)//给$box绑定点击事件,如果当前的事件源是em的话,我们执行fn
  $box.delegate('span',"click",fn)//给$box绑定点击事件,如果当前的事件源是em的话,我们执行fn
 </script>
</body>
</html>

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

jQuery 相关文章推荐
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
header跳转和include包含问题详解
2012/09/08 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python字典底层实现原理详解
2019/12/18 Python
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
写给妈妈的道歉信
2014/01/11 职场文书
教研处工作方案
2014/05/26 职场文书
身边的榜样活动方案
2014/08/20 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
任命通知范文
2015/04/21 职场文书
公司员工离职感言
2015/08/03 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB