javascript實(shí)現(xiàn)樹(shù)形菜單的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)樹(shù)形菜單的方法。分享給大家供大家參考。具體如下:
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://chabaoo.cn" 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; } }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- Javascript動(dòng)態(tài)伸縮+淡出淡入
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- 通用的二級(jí)菜單代碼(css+javascript)
- javascript 靜態(tài)樹(shù)菜單實(shí)現(xiàn)代碼
- javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
- javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
- javascript 樹(shù)形導(dǎo)航菜單實(shí)例代碼
- JavaScript伸縮的菜單簡(jiǎn)單示例
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- javascript實(shí)現(xiàn)控制的多級(jí)下拉菜單
- javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
- javascript伸縮菜單欄實(shí)現(xiàn)代碼分享
- javascript伸縮型菜單實(shí)現(xiàn)代碼
相關(guān)文章
屏蔽IE彈出"您查看的網(wǎng)頁(yè)正在試圖關(guān)閉窗口,是否關(guān)閉此窗口"的方法
本篇文章主要是對(duì)屏蔽IE彈出"您查看的網(wǎng)頁(yè)正在試圖關(guān)閉窗口,是否關(guān)閉此窗口"的方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12JS 輸入字?jǐn)?shù)判斷實(shí)現(xiàn)代碼
判斷輸入的字?jǐn)?shù)2009-08-08js實(shí)現(xiàn)簡(jiǎn)單的星級(jí)選擇器提交效果適用于評(píng)論等
星級(jí)選擇器在網(wǎng)上會(huì)搜到很多類似的代碼,不過(guò)實(shí)現(xiàn)起來(lái)相對(duì)比較復(fù)雜,在本文將為大家介紹的是使用js簡(jiǎn)單的實(shí)現(xiàn)下,感興趣的朋友不要錯(cuò)過(guò)2013-10-10淺談JavaScript的push(),pop(),concat()方法
下面小編就為大家?guī)?lái)一篇淺談JavaScript的push(),pop(),concat()方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06下雪了 javascript實(shí)現(xiàn)雪花飛舞
下雪了,這篇文章主要介紹了javascript實(shí)現(xiàn)雪花飛舞,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04用Javascript數(shù)組處理多個(gè)字符串的連接問(wèn)題
小技巧 用Javascript數(shù)組處理多個(gè)字符串的連接問(wèn)題,大家可以參考下。2009-08-08前端實(shí)現(xiàn)文件的斷點(diǎn)續(xù)傳(前端文件提交+后端PHP文件接收)
本文通過(guò)斷點(diǎn)續(xù)傳的簡(jiǎn)單例子(前端文件提交+后端PHP文件接收),本文以圖片為實(shí)例給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11基于JS制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖
本文將利用JS實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖,這個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版地圖能根據(jù)城市名進(jìn)行位置查詢。文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-05-05淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序
下面小編就為大家?guī)?lái)一篇淺談js在html中的加載執(zhí)行順序,多個(gè)jquery ready執(zhí)行順序。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11