jQuery实现带动画效果的多级下拉菜单代码


Posted in Javascript onSeptember 08, 2015

本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级下拉菜单</title>
<script language="javascript" type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
ul,li{
list-style:none;
font-size:12px;
line-height:20px;
width:80px;
margin:0;
padding-left:6px;
}
.child{
 display:none;
}
.nav a{
display:block;
color:#5c84c1;
padding-left:22px;
}
</style>
<script language="javascript" type="text/javascript">
 //说明 所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套
 $(document).ready(function(){
 //$(".nav ul li").children("ul").hide();
  $(".nav").find("li").not(":has(ul)").children("a").css({textDecoration:"none",color:"#333",background:"none"})
  .click(function(){
  $(this).get(0).location.href="'"+$(this).attr("href")+"'";
  });
 $(".nav").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
  .click(function(){
  if($(this).next("ul").is(":hidden")){  
  $(this).next("ul").slideDown("slow");
  if($(this).parent("li").siblings("li").children("ul").is(":visible")){
  $(this).parent("li").siblings("li").find("ul").slideUp("1000");
  $(this).parent("li").siblings("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
   .end().find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});}
  $(this).css({background:"url(images/statu_open.gif) no-repeat left top;"});
  return false;
 }else{
  $(this).next("ul").slideUp("normal"); 
  //不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏
  $(this).css({background:"url(images/statu_close.gif) no-repeat left top;"});
  $(this).next("ul").children("li").find("ul").fadeOut("normal");
  $(this).next("ul").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});
  return false;
  }
  });
 });
</script>
</head>
<body>
<div class="nav">
 <ul>
 <li>
  <a href="#">一级菜单1</a>
  <ul class="child">
  <li>
   <a href="#">二级菜单1</a>
   </li>
   <li>
   <a href="#">二级菜单1</a>
   <ul class="child">
   <li>
   <a href="#">三级菜单1</a>
   </li>
   <li>
   <a href="#">三级菜单1</a>
   </li>
   </ul>
   </li>
   <li>
   <a href="#">二级菜单2</a>
   <ul class="child">
   <li>
   <a href="#">三级菜单2</a>
   </li>
   <li>
   <a href="#">三级菜单2</a>
   <ul class="child">
    <li>
    <a href="#">四级菜单</a>
    </li>
    <li>
    <a href="#">四级菜单1</a>
    </li>
    <li>
    <a href="#">四级菜单1</a>
    <ul class="child">
    <li>
     <a href="#">五级菜单1</a>
     </li>
     <li>
     <a href="#">五级菜单1</a>
     </li>
     <li>
     <a href="#">五级菜单1</a>
     </li>
    </ul>
    </li>
   </ul>
   </li>
   </ul>
   </li>
  </ul>
  </li>
  <li>
  <a href="#">一级菜单2</a>
  <ul class="child">
  <li>
   <a href="#">二级菜单1</a>
   </li>
   <li>
   <a href="#">二级菜单1</a>
   </li>
  </ul> 
  </li>
  <li>
  <a href="#">一级菜单3</a>
  <ul class="child">
  <li>
   <a href="#">二级菜单1</a>
   </li>
   <li>
   <a href="#">二级菜单1</a>
   </li>
  </ul>
  </li>
  <li>
  <a href="#">一级菜单4</a>
  </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
Vue分页组件实例代码
Apr 17 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 #Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 #Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 #Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
js分页工具实例
2015/01/28 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python字符串Intern机制详解
2019/07/01 Python
Python处理session的方法整理
2019/08/29 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
PHP面试题附答案
2015/11/28 面试题
自荐信包含哪些内容
2013/10/30 职场文书
投标单位介绍信
2014/01/09 职场文书
职称评定自我鉴定
2014/03/18 职场文书
演讲稿格式
2014/04/30 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
施工安全保证书
2015/05/09 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
在Django中使用MQTT的方法
2021/05/10 Python