快捷導(dǎo)航

用JavaScript實(shí)現(xiàn)一個(gè)代碼簡潔、邏輯不復(fù)雜的多級(jí)樹

更新時(shí)間：2014年05月23日 15:05:15 作者：

這篇文章主要介紹了用JavaScript實(shí)現(xiàn)一個(gè)代碼簡潔、邏輯不復(fù)雜的多級(jí)樹,需要的朋友可以參考下

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

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

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

2，在頁面主體中添加樹的具體內(nèi)容，此內(nèi)容也可以動(dòng)態(tài)展示（動(dòng)態(tài)展示只要針對(duì)規(guī)則就很好實(shí)現(xiàn)了，這就不用說了吧偷笑）

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

 
<div class="f" id="sgc1">密碼修改</div> 
<div class="f" id="sgc2">商品選擇</div> 
<div class="f" id="sgc3" onclick="w('gc3')">分類設(shè)置</div> 
<div class="ps" id="gc3" style="display:none"> 
<div id="sfgc91" class="f" onclick="k('fgc91')">Must See</div> 
<div class="ps" id="fgc91"> 
<div class="f">設(shè)置MustSee商品</div> 
</div> 
<div id="sfgc93" class="f" onclick="k('fgc93')">Spotlight</div> 
<div class="ps" id="fgc93"> 
<div class="f">設(shè)置Spotlight商品</div> 
</div> 
<div id="sfgc94" class="f" onclick="k('fgc94')">Daily Specials</div> 
<div class="ps" id="fgc94"> 
<div class="f">設(shè)置DailySpecials商品</div> 
</div> 
<div id="sfgc95" class="f" onclick="k('fgc95')">HotCategory</div> 
<div class="ps" id="fgc95"> 
<div class="f">設(shè)置HotCategory分類</div> 
<div class="f">設(shè)置HotCategory商品</div> 
</div> 
<div id="sfgc96" class="f" onclick="k('fgc96')">Hot & Cool Picks</div> 
<div class="ps" id="fgc96"> 
<div class="f">設(shè)置Hot & Cool Picks商品</div> 
</div> 
<div id="sfgc97" class="f" onclick="k('fgc97')">FeaturedCategorie</div> 
<div class="ps" id="fgc97"> 
<div class="f">設(shè)置FeaturedCategorie分類</div> 
<div class="f">設(shè)置FeaturedCategorie商品</div> 
</div> 
<div id="sfgc98" class="f" onclick="k('fgc98')">You Might Also Like…</div> 
<div class="ps" id="fgc98"> 
<div class="f">設(shè)置You Might Also Like…分類</div> 
<div class="f">設(shè)置You Might Also Like…商品</div> 
</div> 
</div> 
<div class="f" id="sgc4" onclick="w('gc4')">系統(tǒng)設(shè)置</div> 
<div class="ps" id="gc4" style="display:none"> 
<div class="f">用戶管理</div> 
</div> 

3，重頭戲來了，同鞋注意了，接下來實(shí)現(xiàn)JS的樹形控制

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