用JavaScript实现一个代码简洁、逻辑不复杂的多级树

用JavaScript实现一个代码简洁、逻辑不复杂的多级树_javascript技巧

WBOY

Release： 2016-05-16 16:47:03

Original

1242 people have browsed it

在网上找个很多的树实现，总感觉不尽如意，不是需要引用JS外部文件使用插件，就是代码过多让人看的眼花，实际上我只是想实现一个代码简洁、逻辑不复杂的树，费话不多说直接上代码：

1，首先写CSS样式，这个必需要写的头部最先渲染

复制代码代码如下:

2，在页面主体中添加树的具体内容，此内容也可以动态展示（动态展示只要针对规则就很好实现了，这就不用说了吧偷笑）

复制代码代码如下:

密码修改

商品选择

分类设置

Must See

设置MustSee商品

Spotlight

设置Spotlight商品

Daily Specials

设置DailySpecials商品

HotCategory

设置HotCategory分类

设置HotCategory商品

Hot & Cool Picks

设置Hot & Cool Picks商品

FeaturedCategorie

设置FeaturedCategorie分类

设置FeaturedCategorie商品

You Might Also Like…

设置You Might Also Like…分类

设置You Might Also Like…商品

系统设置

用户管理

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，运行实例图如下：
用JavaScript实现一个代码简洁、逻辑不复杂的多级树_javascript技巧