用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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
token 机制和实现方式
Dec 15 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
西德产收音机
2021/03/01 无线电
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php发送邮件的问题详解
2015/06/22 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP strripos函数用法总结
2019/02/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP7新增函数
2021/03/09 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
ipython和python区别详解
2019/06/26 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
基于Python实现简单学生管理系统
2020/07/24 Python
教师实习的自我鉴定
2013/10/26 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
六查六看自查材料
2014/02/17 职场文书
2014年宣传工作总结
2014/11/18 职场文书
创业计划书之物流运送
2019/09/17 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis