基于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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现简单评论区功能
Oct 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
js实现放大镜特效
2017/05/18 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Python入门篇之文件
2014/10/20 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python实现登录与注册系统
2020/11/30 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
大学生志愿者感言
2014/01/15 职场文书
财务部总监岗位职责
2014/03/12 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
酒店端午节活动方案
2014/08/26 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年计生工作总结
2014/11/21 职场文书
十二月早安励志心语大全
2019/12/03 职场文书