js类后台管理菜单类-MenuSwitch
写MenuSwitch类的出发点是因为随着后台管理项越来越多，从而导致菜单显示部出现了滚动条导致页面很不美观，自己蒙生写这个JS类了。
这个功能类采用了目前比较流行的Web2.0做法，使用DIV+CSS+JS方式，将样式和功能分开。我下面先把演示效果放出来吧
复制代码 代码如下:
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);} } } }
打包文件下载