在網(wǎng)上找個很多的樹實(shí)現(xiàn)，總感覺不盡如意，不是需要引用JS外部文件使用插件，就是代碼過多讓人看的眼花，實(shí)際上我只是想實(shí)現(xiàn)一個代碼簡潔、邏輯不復(fù)雜的樹，費(fèi)話不多說直接上代碼：


1，首先寫CSS樣式，這個必需要寫的頭部最先渲染

復(fù)制代碼 代碼如下:

<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>

復(fù)制代碼 代碼如下:

<div>密碼修改</div>
<div>商品選擇</div>
<div>分類設(shè)置</div>
<div>
<div>Must See</div>
<div>
<div>設(shè)置MustSee商品</div>
</div>
<div>Spotlight</div>
<div>
<div>設(shè)置Spotlight商品</div>
</div>
<div>Daily Specials</div>
<div>
<div>設(shè)置DailySpecials商品</div>
</div>
<div>HotCategory</div>
<div>
<div>設(shè)置HotCategory分類</div>
<div>設(shè)置HotCategory商品</div>
</div>
<div>Hot & Cool Picks</div>
<div>
<div>設(shè)置Hot & Cool Picks商品</div>
</div>
<div>FeaturedCategorie</div>
<div>
<div>設(shè)置FeaturedCategorie分類</div>
<div>設(shè)置FeaturedCategorie商品</div>
</div>
<div>You Might Also Like…</div>
<div>
<div>設(shè)置You Might Also Like…分類</div>
<div>設(shè)置You Might Also Like…商品</div>
</div>
</div>
<div>系統(tǒng)設(shè)置</div>
<div>
<div>用戶管理</div>
</div>

復(fù)制代碼 代碼如下:

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;";
}
}