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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php学习之运算符相关概念
2011/06/09 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
关于PHP开发的9条建议
2015/07/27 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python文件名和文件路径操作实例
2017/09/29 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python装饰器用法实例分析
2019/01/14 Python
python递归下载文件夹下所有文件
2019/08/31 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
全国道德模范事迹
2014/02/01 职场文书
车辆委托书范本
2014/10/05 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
财务部岗位职责范本
2015/04/14 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
2019各种保证书范文
2019/06/24 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js