The starting point of writing the menuswitch class is that as there are more and more management items in the background, a scroll bar appears in the menu display department, causing the page to be unsightly. I wrote this JS class myself.
This function class adopts the popular web practice. It uses Div + CSS + js to separate styles and functions. Let me release the demo first.
CopyCode The Code is as follows: function menuswitch (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 = [];
VaR allelements = Document. getelementsbytagname ("Div ");
For (VAR I = 0; I <allelements. length; I ++ ){
VaR mitem = allelements [I];
If (typeof mitem. classname = "string" & mitem. classname = This. _ classname ){
VaR h3s = mitem. getelementsbytagname ("H3 ");
VaR ULS = 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 ){
VaR ULS = melement. getelementsbytagname ("Ul ");
ULS [0]. style. Display = "Block ";
}
Menuswitch. Prototype. Close = function (melement ){
VaR ULS = melement. getelementsbytagname ("Ul ");
ULS [0]. style. Display = "NONE ";
}
Menuswitch. Prototype. isopen = function (melement ){
VaR ULS = melement. getelementsbytagname ("Ul ");
Return ULS [0]. style. Display = "Block ";
}
Menuswitch. Prototype. toggledisplay = function (header ){
VaR mitem;
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 (VAR I = 0; I <this. _ elements. length; I ++ ){
If (this. _ elements [I]! = Mitem ){
VaR ULS = This. _ elements [I]. getelementsbytagname ("Ul ");
ULS [0]. style. Display = "NONE ";
}
}
}
}
Menuswitch. Prototype. init = function (){
VaR instance = this;
This. collectelementbyclass ();
If (this. _ elements. Length = 0 ){
Return;
}
For (VAR I = 0; I <this. _ elements. length; I ++ ){
VaR h3s = 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 );}
}
}
}
Package File Download
