要做一個可以展開摺疊的樹狀導航條，到網上看了一些實現，感覺都比較麻煩，js的代碼量都不小，我的應用程式要求不複雜，但是要求樹狀結構的內容是可以改變的 。所以最後還是自己試著寫了一個。
下面是示範代碼，你可以按照自己的需求改變div中的內容，動態產生div部分代碼就可以實現tree結構的動態建立。
<html>
<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>
</html>
下面是效果示範：
+10 +20 +21 +22 ·30 ·31 （由於展開和收合的表徵圖使用的相對連結，利用改變span的className屬性來改變表徵圖，在blog裡不方便實用，暫且用+代替原來圖表的位置，大家使用的時候可以用你自己的表徵圖代替M1.gif 、P1.gif、D.gif，和你的頁面放在一層檔案夾下即可）
