用JavaScript实现一个代码简洁、逻辑不复杂的多级树_javascript技巧
程序员文章站
2022-05-04 16:33:44
...
在网上找个很多的树实现,总感觉不尽如意,不是需要引用JS外部文件使用插件,就是代码过多让人看的眼花,实际上我只是想实现一个代码简洁、逻辑不复杂的树,费话不多说直接上代码:
1,首先写CSS样式,这个必需要写的头部最先渲染
2,在页面主体中添加树的具体内容,此内容也可以动态展示(动态展示只要针对规则就很好实现了,这就不用说了吧偷笑)
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,运行实例图如下:
1,首先写CSS样式,这个必需要写的头部最先渲染
复制代码 代码如下:
2,在页面主体中添加树的具体内容,此内容也可以动态展示(动态展示只要针对规则就很好实现了,这就不用说了吧偷笑)
复制代码 代码如下:
密码修改
商品选择
分类设置
系统设置
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,运行实例图如下: