To do a can expand the folding tree navigation bar, to the Internet to see some implementation, feel more trouble, JS code is not small, my application requirements are not complex, but the requirements of the tree-like structure can be changed. So in the end, I tried to write one.
The following is the demo code, you can change the content of the div according to their own requirements, the dynamic generation of div part of the code can achieve the dynamic establishment of tree structure.
<script>
function changevisible (Element) {
var children = Element.parentNode.childNodes;
for (var i= 0; i<children.length;i++) {
if (Children[i].nodename = = "DIV") {
var className = Children[i].classname;
if (ClassName = = "Show") {
Element.classname= "fold";
Children[i].classname= "hidden";
}
else{
Element.classname= "Expend";
Children[i].classname= "Show";
}
}
}
}
</script>
<style type= "Text/css" >
div.show{
Display:block;
width:100%;
Background-color: #339966;
}
div.hidden{
Display:none;
}
span.fold{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
Background-image:url ("P1.gif");
Background-repeat:no-repeat;
}
span.expend{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
Background-image:url ("M1.gif");
Background-repeat:no-repeat;
}
span.2blank{
width:20px;
}
span.3blank{
width:40px;
}
span.def{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
Background-image:url ("D.gif");
Background-repeat:no-repeat;
}
</style>
<body>
<div id= "Sidenav" >
<div class= "Show" ><span class= "fold" onclick= "changevisible (This)" > </span>10
<div class= "hidden" ><span class= "2blank" > </span><span class= "fold" onclick= " Changevisible (This) "> </span>20</div>
<div class= "hidden" ><span class= "2blank" > </span><span class= "fold" onclick= " Changevisible (This) "> </span>21</div>
<div class= "hidden" ><span class= "2blank" > </span><span class= "fold" onclick= " Changevisible (This) "> </span>22
<div class= "hidden" ><span class= "3blank" > </span><span class= "def" > </span>30</div>
<div class= "hidden" ><span class= "3blank" > </span><span class= "def" > </span>31</div>
</div>
</div>
</div>
</body>
The following is an effect demo:
+10 +20 +21 +22 30 31 (due to the expansion and collection of the icon used by the relative link to change the span of the classname properties to change the icon, in the blog is not convenient and practical, the use of + instead of the original chart position, you can use your own diagram Mark instead of M1.gif, P1.gif, d.gif, and your page in one-layer folder.
