js一般方法改寫成面向對象方法的無限級折疊菜單示例代碼

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

復制代碼代碼如下:

　　
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<title>很實用的JS+CSS多級樹形展開菜單</title>
<style type="text/css">
body{margin:;padding:;font:px/ TahomaHelveticaArialsansserif;}
ulli{margin:;padding:;}
ul{liststyle:none;}
a{textdecoration: none;}
#root{margin:px;width:px;overflow:hidden;}
#root li{lineheight:px;}
#root rem{paddingleft:px;}
#root add{background:url(treeicogif) px px norepeat;}
#root ren{background:url(treeicogif) px px norepeat;}
#root li a{color:#;paddingleft:px;outline:none;blr:expression(thisonFocus=thisblur());}
#root two{paddingleft:px;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(elnamefn){//綁定事件
if(eladdEventListener) return eladdEventListener(namefnfalse);
return elattachEvent(on+namefn);
}
function nextnode(node){//尋找下一個兄弟並剔除空的文本節點
if(!node)return ;
if(nodenodeType == )
return node;
if(nodenextSibling)
return nextnode(nodenextSibling);
}
function prevnode(node){//尋找上一個兄弟並剔除空的文本節點
if(!node)return ;
if(nodenodeType == )
return node;
if(nodepreviousSibling)
return prevnode(nodepreviousSibling);
}
addEvent(documentgetElementById(root)clickfunction(e){//綁定點擊事件使用root根元素代理
e = e||windowevent;
var target = etarget||esrcElement;
var tp = nextnode(targetparentNodenextSibling);
switch(targetnodeName){
case A://點擊A標簽展開和收縮樹形目錄並改變其樣式
if(tp&&tpnodeName == UL){
if(tpstyledisplay != block ){
tpstyledisplay = block;
prevnode(targetparentNodepreviousSibling)className = ren
}else{
tpstyledisplay = none;
prevnode(targetparentNodepreviousSibling)className = add
}
}
break;
case SPAN://點擊圖標只展開或者收縮
var ap = nextnode(nextnode(targetnextSibling)nextSibling);
if(apstyledisplay != block ){
apstyledisplay = block;
targetclassName = ren
}else{
apstyledisplay = none;
targetclassName = add
}
break;
}
});
windowonload = function(){//頁面加載時給有孩子結點的元素動態添加圖標
var labels = documentgetElementById(root)getElementsByTagName(label);
for(var i=;i<labelslength;i++){
var span = documentcreateElement(span);
spanstylecssText =display:inlineblock;height:px;verticalalign:middle;width:px;cursor:pointer;;
spaninnerHTML =
spanclassName = add;
if(nextnode(labels[i]nextSibling)&&nextnode(labels[i]nextSibling)nodeName == UL)
labels[i]parentNodeinsertBefore(spanlabels[i]);
else
labels[i]className = rem
}
}
**/
//面向對象方法
var Tree = function(o){
thisroot = documentgetElementById(o);
thislabels = thisrootgetElementsByTagName(label);
var that = this;
thisint();
TreeprototypeaddEvent(thisrootclickfunction(e){thattreeshow(e)});
}
Treeprototype = {
int:function(){//初始化頁面加載時給有孩子結點的元素動態添加圖標
for(var i=;i<thislabelslength;i++){
var span = documentcreateElement(span);
spanstylecssText =display:inlineblock;height:px;verticalalign:middle;width:px;cursor:pointer;;
spaninnerHTML =
spanclassName = add;
if(thisnextnode(thislabels[i]nextSibling)&&thisnextnode(thislabels[i]nextSibling)nodeName == UL)
thislabels[i]parentNodeinsertBefore(spanthislabels[i]);
else
thislabels[i]className = rem
}
}
treeshow:function(e){
e = e||windowevent;
var target = etarget||esrcElement;
var tp = thisnextnode(targetparentNodenextSibling);
switch(targetnodeName){
case A://點擊A標簽展開和收縮樹形目錄並改變其樣式
if(tp&&tpnodeName == UL){
if(tpstyledisplay != block ){
tpstyledisplay = block;
thisprevnode(targetparentNodepreviousSibling)className = ren
}else{
tpstyledisplay = none;
thisprevnode(targetparentNodepreviousSibling)className = add
}
}
break;
case SPAN://點擊圖標只展開或者收縮
var ap = thisnextnode(thisnextnode(targetnextSibling)nextSibling);
if(apstyledisplay != block ){
apstyledisplay = block;
targetclassName = ren
}else{
apstyledisplay = none;
targetclassName = add
}
break;
}
}
addEvent:function(elnamefn){//綁定事件
if(eladdEventListener) return eladdEventListener(namefnfalse);
return elattachEvent(on+namefn);
}
nextnode:function(node){//尋找下一個兄弟並剔除空的文本節點
if(!node)return ;
if(nodenodeType == )
return node;
if(nodenextSibling)
return thisnextnode(nodenextSibling);
}
prevnode:function(node){//尋找上一個兄弟並剔除空的文本節點
if(!node)return ;
if(nodenodeType == )
return node;
if(nodepreviousSibling)
return prevnode(nodepreviousSibling);
}
}
tree = new Tree("root");//實例化應用
</script>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20642.html