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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
javascript表单事件处理方法详解
May 15 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
webpack源码之loader机制详解
2018/04/06 Javascript
js闭包学习心得总结
2018/04/17 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Vue.js实现立体计算器
2020/02/22 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python实现宿舍管理系统
2019/11/22 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
采购部部长岗位职责
2014/02/06 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
任命通知范文
2015/04/21 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
八年级作文之友情
2019/11/25 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js