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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python 装饰器深入理解
2017/03/16 Python
Python的多维空数组赋值方法
2018/04/13 Python
python实现简易动态时钟
2018/11/19 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
python 如何区分return和yield
2020/09/22 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书