本文实例讲述了javascript实现树形菜单的方法。分享给大家供大家参考。具体如下:
var ME={ ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0}, html:function(da,f){ var s=\'<ul\'+(f?\' class=\"f\"\':\'\')+\'>\'; for(var i=0,l=da.length;i<l;i++){ if(typeof(da[i].pid)==\'object\'){ s+=\'<li><button type=\"button\" class=\"\'+(i==0&&this.ini.i?\'s1\':(i+1==l?\'s5\':\'s3\'))+\'\" onclick=\"ME.yc(this)\"></button><span><button type=\"button\" class=\"r1\"></button><a href=\"javascript:;\">\'+da[i].ming+\'</a></span>\'; this.ini.i=false; s+=this.html(da[i].pid,(i+1==l)); }else{ s+=\'<li><button type=\"button\" class=\"\'+(i+1==l?\'e3\':\'e1\')+\'\"></button><span><button type=\"button\" class=\"m1\"></button><a href=\"http://www.phpstudy.net\" target=\"mainFrame\">\'+da[i].ming+\'</a></span>\'; } s+=\'</li>\'; } s+=\'</ul>\'; return s; }, st:function(id,da){ document.getElementById(id).innerHTML=this.html(da); }, yc:function(a){ var s=a.className.substr(1); if(s%2){ this.ini.d=a.parentNode.children[2]; this.ini.h1=this.hei(this.ini.d); this.ini.h3=this.ini.h1/10; this.yc1(1); a.className=\'s\'+(parseInt(s)+1); a.parentNode.children[1].children[0].className=\'r2\'; var ol=a.parentNode.parentNode._; if(typeof(ol)==\'object\'){ this.ini.d1=ol; this.ini.h=ol.offsetHeight; this.ini.h2=this.ini.h/10; this.yc2(1); ol.parentNode.children[0].className=\'s\'+(parseInt(ol.parentNode.children[0].className.substr(1))-1); ol.parentNode.children[1].children[0].className=\'r1\'; } a.parentNode.parentNode._=a.parentNode.children[2]; }else{ this.ini.d1=a.parentNode.children[2]; this.ini.h=this.ini.d1.offsetHeight; this.ini.h2=this.ini.h/10; this.yc2(1); a.className=\'s\'+(parseInt(s)-1); a.parentNode.children[1].children[0].className=\'r1\'; a.parentNode.parentNode._=\'\'; } }, yc1:function(b){ var h1=ME.ini.h1-(11/(b+1)-1)*ME.ini.h3; with(ME.ini.d.style){ height=h1+\'px\'; display=\'block\'; } if(b<10){ setTimeout(\'ME.yc1(\'+(b+1)+\')\',25); }else{ ME.ini.d.style.display=\'block\'; ME.ini.d.style.height=\'\'; } }, yc2:function(b){ var h1=(11/(b+1)-1)*ME.ini.h2; with(ME.ini.d1.style){ height=h1+\'px\'; } if(b<10){ setTimeout(\'ME.yc2(\'+(b+1)+\')\',25); }else{ ME.ini.d1.style.display=\'\'; ME.ini.d1.style.height=\'\'; } }, hei:function(a){ var b=a.cloneNode(true); b.style.position=\'absolute\'; b.style.display=\'block\'; b.style.visibility=\'hidden\'; a.parentNode.appendChild(b); var h=b.offsetHeight; a.parentNode.removeChild(b); return h; } }
希望本文所述对大家的javascript程序设计有所帮助。
本文地址:https://www.stayed.cn/item/3074
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我