JS实现适合于后台使用的动画折叠菜单效果_javascript技巧

这是一款适合于后台使用的动画折叠菜单，代码超简，无jQuery，展开与折叠效果平滑。本演示中有两组菜单，向大家展示如何在一个网页中布局两个菜单，整体效果以及兼容性还算可以，希望在实际应用中不会出现什么问题。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ht-control-animate-zd-menu-codes/

具体代码如下：

 function FOLDMenu(id,onlyone){
 if(!document.getElementById || !document.getElementsByTagName){return false;}
 this.menu=document.getElementById(id);
 this.submenu=this.menu.getElementsByTagName("ul");
 this.speed=3;
 this.time=10;
 this.onlyone=onlyone==true?onlyone:false;
 this.links = this.menu.getElementsByTagName("a");
 }
 FOLDMenu.prototype.init=function(){
 var mainInstance = this;
 for(var i=0;i minHeight){
 submenu.style.height = newHeight + "px";
 }else {
 clearInterval(intId);
 submenu.style.height = ""; 
 submenu.className = "";
 } 
 }, this.time); 
 }
 FOLDMenu.prototype.collapseOthers = function(submenu){
 if(this.onlyone){
 for (var i = 0; i < this.submenu.length; i++){
 if (this.submenu[i] != submenu){
 this.closeMenu(this.submenu[i]); 
 }
 }
 }
 }





 
 编程天地
 
电子书籍
 
源码乐园
 
 
 中国门户
 
百度搜索
 
新浪新闻
 
腾讯QQ
 
 
 音乐网站
 
百度音乐
 
QQ163
 


 
 世界大学
 
剑桥
 
牛津
 
哈佛
 
麻省理工
 
 
 中国大学
 
北大
 
清华
 
港大
 
 
 世界好车
 
宝马
 
奔驰
 
奥迪
 
 
 开源论坛
 
PhpWind
 
Discuz!
 

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