您當前位置：首頁 > web前端 > 特效 > JavaScript+CSS多級樹形展開菜單的代碼

JavaScript+CSS多級樹形展開菜單的代碼

來源：程序員人生發布時間：2014-04-05 10:55:30 閱讀次數：4024次

　　JavaScript+CSS多級樹形展開菜單的代碼，本例是應用別人的例子，原來那位老兄是用一般方法寫成的無限級折疊菜單，在此先感謝他！后來我就通過了一些簡化修改，將原來的例子改成了面向對象的方式，實例中的展開與閉合的小圖標可以自己重新添加，從而更好的查看效果。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript+CSS多級樹形展開菜單</title><style type="text/css">body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}ul,li,{margin:0;padding:0;}ul{list-style:none;}a{text-decoration: none;}#root{margin:10px;width:200px;overflow:hidden;}#root li{line-height:25px;}#root .rem{padding-left:16px;}#root .add{background:url(/uploads/allimg/1209/treeico.gif) -4px -31px no-repeat;}#root .ren{background:url(/uploads/allimg/1209/treeico.gif) -4px -7px no-repeat;}#root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}#root .two{padding-left:20px;display:none;}</style></head><body><ul id="root"><li><label><a href="javascript:;">校訊通</a></label><ul class="two"><li><label><a href="javascript:;">沈陽市</a></label><ul class="two"><li><label><a href="javascript:;">二小</a></label><ul class="two"><li><label><a href="javascript:;">二年級</a></label></li><li><label><a href="javascript:;">三年級</a></label><ul class="two"><li><label><a href="javascript:;">一班</a></label><ul class="two"><li><label><a href="javascript:;">張三</a></label></li><li><label><a href="javascript:;">王五</a></label><ul class="two"><li><label><a href="javascript:;">班長</a></label></li><li><label><a href="javascript:;">學習委員</a></label></li></ul></li></ul></li><li><label><a href="javascript:;">實驗班</a></label></li></ul></li></ul></li></ul></li><li><label><a href="javascript:;">撫順市</a></label><ul class="two"><li><label><a href="javascript:;">二小</a></label></li><li><label><a href="javascript:;">一中</a></label></li></ul></li></ul></li></ul><script type="text/javascript" >/**一般JS方法function addEvent(el,name,fn){//綁定事件if(el.addEventListener) return el.addEventListener(name,fn,false);return el.attachEvent('on'+name,fn);}function nextnode(node){//尋找下一個兄弟并剔除空的文本節點if(!node)return ;if(node.nodeType == 1)return node;if(node.nextSibling)return nextnode(node.nextSibling);}function prevnode(node){//尋找上一個兄弟并剔除空的文本節點if(!node)return ;if(node.nodeType == 1)return node;if(node.previousSibling)return prevnode(node.previousSibling);}addEvent(document.getElementById('root'),'click',function(e){//綁定點擊事件，使用root根元素代理e = e||window.event;var target = e.target||e.srcElement;var tp = nextnode(target.parentNode.nextSibling);switch(target.nodeName){case 'A'://點擊A標簽展開和收縮樹形目錄，并改變其樣式if(tp&&tp.nodeName == 'UL'){if(tp.style.display != 'block' ){tp.style.display = 'block';prevnode(target.parentNode.previousSibling).className = 'ren'}else{tp.style.display = 'none';prevnode(target.parentNode.previousSibling).className = 'add'}}break;case 'SPAN'://點擊圖標只展開或者收縮var ap = nextnode(nextnode(target.nextSibling).nextSibling);if(ap.style.display != 'block' ){ap.style.display = 'block';target.className = 'ren'}else{ap.style.display = 'none';target.className = 'add'}break;}});window.onload = function(){//頁面加載時給有孩子結點的元素動態添加圖標var labels = document.getElementById('root').getElementsByTagName('label');for(var i=0;i<labels.length;i++){var span = document.createElement('span');span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';span.innerHTML = ' 'span.className = 'add';if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL')labels[i].parentNode.insertBefore(span,labels[i]);elselabels[i].className = 'rem'}}**///面向對象方法var Tree = function(o){this.root = document.getElementById(o);this.labels = this.root.getElementsByTagName('label');var that = this;this.int();Tree.prototype.addEvent(this.root,'click',function(e){that.treeshow(e)});}Tree.prototype = {int:function(){//初始化頁面，加載時給有孩子結點的元素動態添加圖標for(var i=0;i<this.labels.length;i++){var span = document.createElement('span');span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';span.innerHTML = ' 'span.className = 'add';if(this.nextnode(this.labels[i].nextSibling)&&this.nextnode(this.labels[i].nextSibling).nodeName == 'UL')this.labels[i].parentNode.insertBefore(span,this.labels[i]);elsethis.labels[i].className = 'rem'}},treeshow:function(e){e = e||window.event;var target = e.target||e.srcElement;var tp = this.nextnode(target.parentNode.nextSibling);switch(target.nodeName){case 'A'://點擊A標簽展開和收縮樹形目錄，并改變其樣式if(tp&&tp.nodeName == 'UL'){if(tp.style.display != 'block' ){tp.style.display = 'block';this.prevnode(target.parentNode.previousSibling).className = 'ren'}else{tp.style.display = 'none';this.prevnode(target.parentNode.previousSibling).className = 'add'}}break;case 'SPAN'://點擊圖標只展開或者收縮var ap = this.nextnode(this.nextnode(target.nextSibling).nextSibling);if(ap.style.display != 'block' ){ap.style.display = 'block';target.className = 'ren'}else{ap.style.display = 'none';target.className = 'add'}break;}},addEvent:function(el,name,fn){//綁定事件if(el.addEventListener) return el.addEventListener(name,fn,false);return el.attachEvent('on'+name,fn);},nextnode:function(node){//尋找下一個兄弟并剔除空的文本節點if(!node)return ;if(node.nodeType == 1)return node;if(node.nextSibling)return this.nextnode(node.nextSibling);},prevnode:function(node){//尋找上一個兄弟并剔除空的文本節點if(!node)return ;if(node.nodeType == 1)return node;if(node.previousSibling)return prevnode(node.previousSibling);}}tree = new Tree("root");//實例化應用</script></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 邂逅SQL Server 2008的別樣心動

下一篇 運營技巧：數據分析讓網絡推廣事半功倍

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript+CSS多級樹形展開菜單的代碼