jQuery实现有动画淡出效果的二级折叠菜单代码


Posted in Javascript onOctober 17, 2015

本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:

这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更多的空间来修饰美化,想怎么弄就怎么弄了。

运行效果截图如下:

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>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<SCRIPT src="jquery1.3.2.js" type=text/javascript></SCRIPT>
<SCRIPT>
$(function(){
 $("a").bind("focus",function(){if(this.blur)this.blur();});
 $("#menu > li:first-child").addClass("first_menu");
 $("#menu > li:first-child.current_page_item, #menu > li:first-child.current-cat").addClass("first_menu_active");
 $("#menu > li:last-child").addClass("last_menu");
 $("#menu > li:last-child.current_page_item, #menu > li:last-child.current-cat").addClass("last_menu_active");
 $("#menu li ul li:has(ul)").addClass("parent_menu");
 $("#right_col ul > li:last-child").css({marginBottom:"0"});
 $("#comment_area ol > li:even").addClass("even_comment");
 $("#comment_area ol > li:odd").addClass("odd_comment");
 $(".even_comment > .children > li").addClass("even_comment_children");
 $(".odd_comment > .children > li").addClass("odd_comment_children");
 $(".even_comment_children > .children > li").addClass("odd_comment_children");
 $(".odd_comment_children > .children > li").addClass("even_comment_children");
 $(".even_comment_children > .children > li").addClass("odd_comment_children");
 $(".odd_comment_children > .children > li").addClass("even_comment_children");
 $("#guest_info input,#comment_textarea textarea")
 .focus( function () { $(this).css({borderColor:"#33a8e5"}) } )
 .blur( function () { $(this).css({borderColor:"#ccc"}) } );
 $(".search_tag").toggle(function(){
 $(".search_tag").addClass("active_search_tag");
 $("#tag_list ul").animate({ opacity: 'show', height:"show" }, {duration:1000 ,easing:"easeOutBack"});
 return false;
 },function(){
 $("#tag_list ul").fadeTo("slow", 0).slideUp("slow").fadeTo("fast", 1);
 $(".search_tag").removeClass("active_search_tag")
 return false;
 });
 $("#trackback_switch").click(function(){
 $("#comment_switch").removeClass("comment_switch_active");
 $(this).addClass("comment_switch_active");
 $("#comment_area").animate({opacity: 'hide'}, 0);
 $("#trackback_area").animate({opacity: 'show'}, 1000);
 return false;
 });
 $("#comment_switch").click(function(){
 $("#trackback_switch").removeClass("comment_switch_active");
 $(this).addClass("comment_switch_active");
 $("#trackback_area").animate({opacity: 'hide'}, 0);
 $("#comment_area").animate({opacity: 'show'}, 1000);
 return false;
 });
 $("#guest_info input,#comment_textarea textarea")
 .focus( function () { $(this).css({borderColor:"#33a8e5"}) } )
 .blur( function () { $(this).css({borderColor:"#ccc"}) } );
 $("blockquote").append('<div class="quote_bottom"></div>');
 $(".side_box:first").addClass("first_side_box");
});
function changefc(color){
 document.getElementById("search_input").style.color=color;
}
/*dropdowm menu*/
var menu=function(){
 var t=15,z=50,s=6,a;
 function dd(n){this.n=n; this.h=[]; this.c=[]}
 dd.prototype.init=function(p,c){
  a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
  for(i;i<l;i++){
   var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
   h.onmouseover=new Function(this.n+'.st('+i+',true)');
   h.onmouseout=new Function(this.n+'.st('+i+')');
  }
 }
 dd.prototype.st=function(x,f){
  var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
  clearInterval(c.t); c.style.overflow='hidden';
  if(f){
   p.className+=' '+a;
   if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
   if(c.mh==c.offsetHeight){c.style.overflow='visible'}
   else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
  }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
 }
 function sl(c,f){
  var h=c.offsetHeight;
  if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
   if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
   clearInterval(c.t); return
  }
  var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
  c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
  c.style.height=h+(d*f)+'px'
 }
 return{dd:dd}
}();
</SCRIPT>
<style type="text/css">
a{text-decoration:none}
.menu ul{
 margin:0 0 0 10px;
 padding:0;
 display:none;
}
.menu ul li{
 height:22px;
 line-height:22px;
 border:none;
}
.menu ul li a{
 font-size:12px;
 font-weight:normal;
 color:#666;
}
.menu ul ul{
 position:absolute;
 z-index:3;
 background:#CC3366;
}
.menu ul ul li{text-indent:10px;padding-right:10px}
.menu ul ul li a{color:#fff}
</style>
</head>
<body>
 <ul class="menu" id="menu">
 <li><a href="#">一级菜单1</a>
 <ul>
 <li><a href="#">二级菜单1</a></li>
 <li><a href="#">二级菜单2</a></li>
 <li><a href="#">二级菜单3</a></li>
 <li><a href="#">二级菜单4</a></li>
 <li><a href="#">二级菜单5</a></li>
 <li><a href="#">二级菜单6</a></li>
 </ul>
 </li> 
 <li><a href="#">一级菜单2</a>
 <ul>
 <li><a href="#">二级菜单1</a>
  <ul>
  <li><a href="#">三级菜单1</a></li>
  <li><a href="#">三级菜单2</a></li>
  </ul>
 </li>
 <li><a href="#">二级菜单2</a></li>
 </ul>
 </li>
 </ul>
 <SCRIPT type=text/javascript> 
 var menu=new menu.dd("menu");
 menu.init("menu","menuhover");
</SCRIPT>
</body>
</html>

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

Javascript 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
javascript call方法使用说明
Jan 11 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
Highcharts入门之简介
Aug 02 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 #Javascript
基于jQuery实现的菜单切换效果
Oct 16 #Javascript
javascript判断复选框是否选中的方法
Oct 16 #Javascript
jquery判断复选框是否被选中的方法
Oct 16 #Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 #Javascript
js生成随机数的方法实例
Oct 16 #Javascript
jQuery实现商品活动倒计时
Oct 16 #Javascript
You might like
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
php中{}大括号是什么意思
2013/12/01 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
使用python实现tcp自动重连
2017/07/02 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python实现tail -f 功能
2020/01/17 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
教师对学生的评语
2014/04/28 职场文书
医院合作协议书
2014/08/19 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
办公室禁烟通知
2015/04/23 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Python序列化模块JSON与Pickle
2022/06/05 Python