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中通过URL传递汉字的方法
Apr 09 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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中实现进程间通讯
2006/10/09 PHP
PHP 高手之路(一)
2006/10/09 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python实现计算器功能
2019/10/31 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
GWT都有什么特性
2016/12/02 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
后勤人员自我鉴定
2013/10/20 职场文书
档案接收函范文
2014/01/10 职场文书
小学国庆节活动方案
2014/02/11 职场文书
医学生求职信
2014/07/01 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
婚宴新娘致辞
2015/07/28 职场文书
电台广播稿范文
2015/08/19 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis