基于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>

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

(0)

相关推荐

  • jquery实现多级下拉菜单的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery实现多级下拉菜

  • jQuery多级手风琴菜单实例讲解

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单. HTML 首先在head间引用jQuery和插件. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascri

  • jquery 多级下拉菜单核心代码

    jquery 复制代码 代码如下: $(document).ready(function(){ $("ul li").hover(function(){ $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示: },function(){ $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul: }) $("ul li ul li ul&qu

  • jquery 实现二级/三级/多级联动菜单的思路及代码

    本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省.市.区.城市代码结构大致如下: 内蒙古:150000,呼和浩特:150100,新城区:150101. 其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号

  • jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

    本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单.不过添加这样一个标记似乎挺简单,你可以自己动手添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show

  • jQuery实现多级下拉菜单jDropMenu的方法

    本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法.分享给大家供大家参考.具体如下: 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单,英文名叫 DropDown Menu.通过 each() 遍历添加相应的处理事件 mouseover,mouseout 和 tab 操作的支持.这个效果是我们平时最常见的一个效果之一,也是一个十分实用的一个 JavaScript 特效.例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果. 运行效果截图如下: 在线演示地址

  • jquery+CSS实现的多级竖向展开树形TRee菜单效果

    本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea

  • jQuery插件cxSelect多级联动下拉菜单实例解析

    随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学

  • jQuery实现精美的多级下拉菜单特效

    这是一款精美的多级下拉菜单美化,可以完美替代"select"来实现下拉菜单的效果.而且支持多级菜单,有加载等待效果,有层级分类展示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www

  • jQuery插件实现多级联动菜单效果

    开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

随机推荐