基于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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
关于vue组件事件属性穿透详解
2019/10/28 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python 装饰器使用详解
2017/07/29 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
公司离职证明标准样本
2014/10/05 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js