Write the Menuswitch class starting point is because with more and more background management items, which led to the menu display of the scroll bar led to the page is very beautiful, their own Monsen write this JS class.
This feature class uses the current Web2.0 approach, separating styles and functions using the DIV+CSS+JS approach. Let me show you the results.
Copy Code code 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