写MenuSwitch类的出发点是因为随着后台管理项越来越多，从而导致菜单显示部出现了滚动条导致页面很不美观，自己蒙生写这个JS类了。
这个功能类采用了目前比较流行的Web2.0做法，使用DIV+CSS+JS方式，将样式和功能分开。我下面先把演示效果放出来吧
复制代码 代码如下:
functionMenuSwitch(className){
this._elements=[];
this._default=-1;
this._className=className;
this._previous=false;
}
MenuSwitch.prototype.setDefault=function(id){
this._default=Number(id);
}
MenuSwitch.prototype.setPrevious=function(flag){
this._previous=Boolean(flag);
}
MenuSwitch.prototype.collectElementbyClass=function(){
this._elements=[];
varallelements=document.getElementsByTagName("div");
for(vari=0;i<allelements.length;i++){
varmItem=allelements[i];
if(typeofmItem.className=="string"&&mItem.className==this._className){
varh3s=mItem.getElementsByTagName("h3");
varuls=mItem.getElementsByTagName("ul");
if(h3s.length==1&&uls.length==1){
h3s[0].style.cursor="hand";
if(this._default==this._elements.length){
uls[0].style.display="block";
}else{
uls[0].style.display="none";
}
this._elements[this._elements.length]=mItem;
}
}
}
}
MenuSwitch.prototype.open=function(mElement){
varuls=mElement.getElementsByTagName("ul");
uls[0].style.display="block";
}
MenuSwitch.prototype.close=function(mElement){
varuls=mElement.getElementsByTagName("ul");
uls[0].style.display="none";
}
MenuSwitch.prototype.isOpen=function(mElement){
varuls=mElement.getElementsByTagName("ul");
returnuls[0].style.display=="block";
}
MenuSwitch.prototype.toggledisplay=function(header){
varmItem;
if(window.addEventListener){
mItem=header.parentNode;
}else{
mItem=header.parentElement;
}
if(this.isOpen(mItem)){
this.close(mItem);
}else{
this.open(mItem);
}
if(!this._previous){
for(vari=0;i<this._elements.length;i++){
if(this._elements[i]!=mItem){
varuls=this._elements[i].getElementsByTagName("ul");
uls[0].style.display="none";
}
}
}
}
MenuSwitch.prototype.init=function(){
varinstance=this;
this.collectElementbyClass();
if(this._elements.length==0){
return;
}
for(vari=0;i<this._elements.length;i++){
varh3s=this._elements[i].getElementsByTagName("h3");
if(window.addEventListener){
h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false);
}else{
h3s[0].onclick=function(){instance.toggledisplay(this);}
}
}
}
打包文件下载
【js类后台管理菜单类-MenuSwitch】相关文章：
★ 显示、隐藏密码
★ 美化下拉列表