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


Posted in Javascript onMay 23, 2014

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

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

<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,在页面主体中添加树的具体内容,此内容也可以动态展示(动态展示只要针对规则就很好实现了,这就不用说了吧偷笑)
<div class="f" id="sgc1">密码修改</div> 
<div class="f" id="sgc2">商品选择</div> 
<div class="f" id="sgc3" onclick="w('gc3')">分类设置</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">设置MustSee商品</div> 
</div> 
<div id="sfgc93" class="f" onclick="k('fgc93')">Spotlight</div> 
<div class="ps" id="fgc93"> 
<div class="f">设置Spotlight商品</div> 
</div> 
<div id="sfgc94" class="f" onclick="k('fgc94')">Daily Specials</div> 
<div class="ps" id="fgc94"> 
<div class="f">设置DailySpecials商品</div> 
</div> 
<div id="sfgc95" class="f" onclick="k('fgc95')">HotCategory</div> 
<div class="ps" id="fgc95"> 
<div class="f">设置HotCategory分类</div> 
<div class="f">设置HotCategory商品</div> 
</div> 
<div id="sfgc96" class="f" onclick="k('fgc96')">Hot & Cool Picks</div> 
<div class="ps" id="fgc96"> 
<div class="f">设置Hot & Cool Picks商品</div> 
</div> 
<div id="sfgc97" class="f" onclick="k('fgc97')">FeaturedCategorie</div> 
<div class="ps" id="fgc97"> 
<div class="f">设置FeaturedCategorie分类</div> 
<div class="f">设置FeaturedCategorie商品</div> 
</div> 
<div id="sfgc98" class="f" onclick="k('fgc98')">You Might Also Like…</div> 
<div class="ps" id="fgc98"> 
<div class="f">设置You Might Also Like…分类</div> 
<div class="f">设置You Might Also Like…商品</div> 
</div> 
</div> 
<div class="f" id="sgc4" onclick="w('gc4')">系统设置</div> 
<div class="ps" id="gc4" style="display:none"> 
<div class="f">用户管理</div> 
</div>

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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
Javascript模块化编程详解
Dec 01 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
详解webpack babel的配置
Jan 09 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JS代码优化的8点建议
Feb 04 Javascript
详解Vue router路由
Nov 20 Vue.js
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 #Javascript
jquery重复提交请求的原因浅析
May 23 #Javascript
jquery仿搜索自动联想功能代码
May 23 #Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 #Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 #Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 #Javascript
You might like
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
python连接mysql实例分享
2016/10/09 Python
python3 map函数和filter函数详解
2019/08/26 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
pycharm安装及如何导入numpy
2020/04/03 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技