基于jquery实现多级菜单效果

更新时间：2017年07月25日 14:15:32 作者：diasa

这篇文章主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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实现自定义滚动条的方法,通过本文的介绍你可以换掉千篇一律的默认滚动条,让你的网站或web项目更具特色,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
jQuery的:parent选择器定义和用法
jQuery的:parent选择器匹配含有子元素或者文本的元素，空格也算是含有的元素，下面有几个示例，大家可以学习下
2014-07-07
JQuery 使用attr方法实现下拉列表选中
实现下拉列表选中的方法有很多，这篇文章主要介绍了JQuery 使用attr方法的具体实现，需要的朋友可以收藏下
2014-10-10
JQuery 风格的HTML文本转义
astinus开发过程中，我自己就在不断的使用。有次贴了一些JS代码进去，于是页面显示错误。显然，把源代码直接放进html文本了——好吧，从05年转去做网游以后，一直没有正经的做过web了。
2009-07-07
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用，于是本人搜集整理了一些，需要了解的朋友可以详细参考下
2012-12-12
分享15个大家都熟知的jquery小技巧
这篇文章主要分享了15个大家都熟知的jquery小技巧，帮助提高你jQuery应用的简单小技巧，感兴趣的小伙伴们可以参考一下
2015-12-12
jQuery中nextAll()方法用法实例
这篇文章主要介绍了jQuery中nextAll()方法用法,实例分析了nextAll()方法的功能、定义及查找匹配元素之后所有的同辈元素使用技巧,需要的朋友可以参考下
2015-01-01
jquery传参及获取方式(两种方式)
这篇文章主要介绍了jquery传参及获取方式,本文给大家两种方式，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
JQuery页面的表格数据的增加与分页的实现
使用JQuery实现页面的表格数据的增加与分页，具体示例如下，喜欢的朋友可以参考下
2013-12-12
jQuery制作全屏宽度固定高度轮播图(实例讲解)
下面小编就为大家带来一篇jQuery制作全屏宽度固定高度轮播图(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07