1，首先写CSS样式，这个必需要写的头部最先渲染
复制代码 代码如下:
.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;
}
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，运行实例图如下：
