本例是应用别人的例子原来那位老兄是用一般方法写成的无限级折叠菜单在此先感谢他！后来我就通过了一些简化修改将原来的例子改成了面向对象的方式实例中的展开与闭合的小图标可以自己重新添加从而更好的查看效果
复制代码 代码如下:
<!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>
