在網上找個很多的樹實現，總感覺不盡如意，不是需要引用JS外部文件使用插件，就是代碼過多讓人看的眼花，實際上我只是想實現一個代碼簡潔、邏輯不復雜的樹，費話不多說直接上代碼：
1，首先寫CSS樣式，這個必需要寫的頭部最先渲染
複製代碼代碼如下:
<style>
.ps{margin-left:10px;display:none;}
.f {
background: url("add.gif") no-repeat scroll -4px -21px;
cursor: pointer;
height: 35px;
line-height: 37px;
padding-left: 20px;
}
</style>
2，在頁面主體中添加樹的具體內容，此內容也可以動態展示（動態展示只要針對規則就很好實現了，這就不用說了吧偷笑）
複製代碼代碼如下:
<div id="sgc1">密碼修改</div>
<div id="sgc2">商品選擇</div>
<div id="sgc3" onclick="w('gc3')">分類設置</div>
<div id="gc3" style="display:none">
<div id="sfgc91" onclick="k('fgc91')">Must See</div>
<div id="fgc91">
<div>設置MustSee商品</div>
</div>
<div id="sfgc93" onclick="k('fgc93')">Spotlight</div>
<div id="fgc93">
<div>設置Spotlight商品</div>
</div>
<div id="sfgc94" onclick="k('fgc94')">Daily Specials</div>
<div id="fgc94">
<div>設置DailySpecials商品</div>
</div>
<div id="sfgc95" onclick="k('fgc95')">HotCategory</div>
<div id="fgc95">
<div>設置HotCategory分類</div>
<div>設置HotCategory商品</div>
</div>
<div id="sfgc96" onclick="k('fgc96')">Hot & Cool Picks</div>
<div id="fgc96">
<div>設置Hot & Cool Picks商品</div>
</div>
<div id="sfgc97" onclick="k('fgc97')">FeaturedCategorie</div>
<div id="fgc97">
<div>設置FeaturedCategorie分類</div>
<div>設置FeaturedCategorie商品</div>
</div>
<div id="sfgc98" onclick="k('fgc98')">You Might Also Like…</div>
<div id="fgc98">
<div>設置You Might Also Like…分類</div>
<div>設置You Might Also Like…商品</div>
</div>
</div>
<div id="sgc4" onclick="w('gc4')">系統設置</div>
<div id="gc4" style="display:none">
<div>用戶管理</div>
</div>
3，重頭戲來了，同鞋注意了，接下來實現JS的樹形控制
複製代碼代碼如下:
function w(vd) {
var ob = document.getElementById(vd);
if (ob.style.display == "block" || ob.style.display == "") {
ob.style.display = "none";
var ob2 = document.getElementById('s' + vd);
ob2.style.background = "url(add.gif) -4px -21px no-repeat";
}
else {
ob.style.display = "block";
var ob2 = document.getElementById('s' + vd);
ob2.style.background = "url(add.gif) -4px 4px no-repeat;";
}
}
function k(vd) {
var ob = document.getElementById(vd);
if (ob.style.display == "block") {
ob.style.display = "none";
var ob2 = document.getElementById('s' + vd);
ob2.style.background = "url(add.gif) -4px -21px no-repeat";
}
else {
ob.style.display = "block";
var ob2 = document.getElementById('s' + vd);
ob2.style.background = "url(add.gif) -4px 4px no-repeat;";
}
}
4，運行實例圖如下：