This example is the application of other people's example, the original man is written in the general method of infinite folding menu, thank him first! Later, I passed some simplified changes to the original example of the object-oriented approach, the expansion of the instance and closed the small icon can be added to their own, so as to better view the effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Practical JS+CSS Multi-level tree Expansion menu </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 (treeico.gif) -4px-31px no-repeat;
#root. Ren{background:url (treeico.gif) -4px-7px no-repeat;
#root li A{color: #666666;p adding-left:5px;outline:none;blr:expression (This.onfocus=this.blur ());}
#root. Two{padding-left:20px;display:none;}
</style>
<body>
<ul id= "root" >
<li>
<label><a href= "javascript:;" > School Communication </a></label>
<ul class= "Two" >
<li>
<label><a href= "javascript:;" > Shenyang </a></label>
<ul class= "Two" >
<li>
<label><a href= "javascript:;" > II Small </a></label>
<ul class= "Two" >
<li><label><a href= "javascript:;" > Second Grade </a></label></li>
<li>
<label><a href= "javascript:;" > Third grade </a></label>
<ul class= "Two" >
<li>
<label><a href= "javascript:;" > class </a></label>
<ul class= "Two" >
<li><label><a href= "javascript:;" > John </a></label></li>
<li>
<label><a href= "javascript:;" > Harry </a></label>
<ul class= "Two" >
<li><label><a href= "javascript:;" > Monitor </a></label></li>
<li><label><a href= "javascript:;" > Study Committee </a></label></li>
</ul>
</li>
</ul>
</li>
<li><label><a href= "javascript:;" > Experimental Class </a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label><a href= "javascript:;" > Fushun </a></label>
<ul class= "Two" >
<li><label><a href= "javascript:;" > II Small </a></label></li>
<li><label><a href= "javascript:;" > A </a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type= "Text/javascript" >
/** General JS Method
function Addevent (EL,NAME,FN) {//binding event
if (El.addeventlistener) return El.addeventlistener (Name,fn,false);
Return el.attachevent (' on ' +name,fn);
}
function NextNode (node) {//searching for the next sibling and culling the empty text node
if (!node) return;
if (Node.nodetype = 1)
return node;
if (node.nextsibling)
Return NextNode (node.nextsibling);
}
function PrevNode (node) {//searching for the previous sibling and excluding empty text nodes
if (!node) return;
if (Node.nodetype = 1)
return node;
if (node.previoussibling)
Return PrevNode (node.previoussibling);
}
Addevent (document.getElementById (' root '), ' click ', Function (e) {//Binding Sentinel event, using root element agent
E = e| | window.event;
var target = e.target| | E.srcelement;
var tp = NextNode (target.parentNode.nextSibling);
Switch (target.nodename) {
Case ' a '://Click on a tab to expand and shrink the tree directory, and change its style
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 '://click icon to expand or shrink
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 () {//Page load dynamically add icon to element with child node
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]);
Else
Labels[i].classname = ' rem '
}
}
**/
Object-oriented approach
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 () {//Initialize the page, dynamically add an icon to the element with child node when loading
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]);
Else
This.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 '://Click on a tab to expand and shrink the tree directory, and change its style
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 '://click icon to expand or shrink
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) {//binding event
if (El.addeventlistener) return El.addeventlistener (Name,fn,false);
Return el.attachevent (' on ' +name,fn);
},
Nextnode:function (node) {//searching for the next sibling and culling the empty text node
if (!node) return;
if (Node.nodetype = 1)
return node;
if (node.nextsibling)
Return This.nextnode (node.nextsibling);
},
Prevnode:function (node) {//searching for the previous sibling and culling the empty text node
if (!node) return;
if (Node.nodetype = 1)
return node;
if (node.previoussibling)
Return PrevNode (node.previoussibling);
}
}
Tree = new Tree ("root");//Instantiate application
</script>
</body>
