首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
js简单抽奖代码
Jan 16 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
vue-hook-form使用详解
Apr 07 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
死亡搁浅(1) 铁拳(1) 原神(1) 74HC4066(1) 吸血鬼(1) 模拟人生(1) BCLer(1) FS1016(1) 大话西游(1) AGC(1)
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素（入栈），返回新长度。
2011/11/07 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
浅谈python迭代器
2017/11/08 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
行政专员岗位职责范本
2014/08/26 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
七一慰问简报
2015/07/20 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书