recherche

Maison >interface Web >js tutoriel >用JavaScript实现一个代码简洁、逻辑不复杂的多级树_javascript技巧

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

WBOY
WBOYoriginal
2016-05-16 16:47:031252parcourir

在网上找个很多的树实现，总感觉不尽如意，不是需要引用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，运行实例图如下：
用JavaScript实现一个代码简洁、逻辑不复杂的多级树_javascript技巧
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery attr方法获取input的checked属性问题_jqueryArticle suivant：js动态修改整个页面样式达到换肤效果_javascript技巧

Articles Liés

Voir plus