用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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery取id有.的值的方法
May 21 Javascript
完善的jquery处理机制
Feb 21 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
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
投票管理程序
2006/10/09 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
js脚本实现数据去重
2014/11/27 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python绘制简单彩虹图
2018/11/19 Python
python构建基础的爬虫教学
2018/12/23 Python
python实现函数极小值
2019/07/10 Python
python的debug实用工具 pdb详解
2019/07/12 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python实现最短路径的实例方法
2020/07/19 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
如何提高MySql的安全性
2014/06/19 面试题
保护母亲河倡议书
2014/04/14 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
找工作求职信
2014/07/07 职场文书
校园广播稿精选
2014/10/01 职场文书
2014年物流工作总结
2014/11/25 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript