js一般方法改写成面向对象方法的无限级折叠菜单示例代码


Posted in Javascript onJuly 04, 2013

本例是应用别人的例子,原来那位老兄是用一般方法写成的无限级折叠菜单,在此先感谢他!后来我就通过了一些简化修改,将原来的例子改成了面向对象的方式,实例中的展开与闭合的小图标可以自己重新添加,从而更好的查看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>很实用的JS+CSS多级树形展开菜单</title> 
<style type="text/css"> 
body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} 
ul,li,{margin:0;padding:0;} 
ul{list-style:none;} 
a{text-decoration: none;} 
#root{margin:10px;width:200px;overflow:hidden;} 
#root li{line-height:25px;} 
#root .rem{padding-left:16px;} 
#root .add{background:url(treeico.gif) -4px -31px no-repeat;} 
#root .ren{background:url(treeico.gif) -4px -7px no-repeat;} 
#root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());} 
#root .two{padding-left:20px;display:none;} 
</style> 
</head> 
<body> 
<ul id="root"> 
<li> 
<label><a href="javascript:;">校讯通</a></label> 
<ul class="two"> 
<li> 
<label><a href="javascript:;">沈阳市</a></label> 
<ul class="two"> 
<li> 
<label><a href="javascript:;">二小</a></label> 
<ul class="two"> 
<li><label><a href="javascript:;">二年级</a></label></li> 
<li> 
<label><a href="javascript:;">三年级</a></label> 
<ul class="two"> 
<li> 
<label><a href="javascript:;">一班</a></label> 
<ul class="two"> 
<li><label><a href="javascript:;">张三</a></label></li> 
<li> 
<label><a href="javascript:;">王五</a></label> 
<ul class="two"> 
<li><label><a href="javascript:;">班长</a></label></li> 
<li><label><a href="javascript:;">学习委员</a></label></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><label><a href="javascript:;">实验班</a></label></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</li> 
<li> 
<label><a href="javascript:;">抚顺市</a></label> 
<ul class="two"> 
<li><label><a href="javascript:;">二小</a></label></li> 
<li><label><a href="javascript:;">一中</a></label></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
<script type="text/javascript" > 
/**一般JS方法 
function addEvent(el,name,fn){//绑定事件 
if(el.addEventListener) return el.addEventListener(name,fn,false); 
return el.attachEvent('on'+name,fn); 
} 
function nextnode(node){//寻找下一个兄弟并剔除空的文本节点 
if(!node)return ; 
if(node.nodeType == 1) 
return node; 
if(node.nextSibling) 
return nextnode(node.nextSibling); 
} 
function prevnode(node){//寻找上一个兄弟并剔除空的文本节点 
if(!node)return ; 
if(node.nodeType == 1) 
return node; 
if(node.previousSibling) 
return prevnode(node.previousSibling); 
} 
addEvent(document.getElementById('root'),'click',function(e){//绑定点击事件,使用root根元素代理 
e = e||window.event; 
var target = e.target||e.srcElement; 
var tp = nextnode(target.parentNode.nextSibling); 
switch(target.nodeName){ 
case 'A'://点击A标签展开和收缩树形目录,并改变其样式 
if(tp&&tp.nodeName == 'UL'){ 
if(tp.style.display != 'block' ){ 
tp.style.display = 'block'; 
prevnode(target.parentNode.previousSibling).className = 'ren' 
}else{ 
tp.style.display = 'none'; 
prevnode(target.parentNode.previousSibling).className = 'add' 
} 
} 
break; 
case 'SPAN'://点击图标只展开或者收缩 
var ap = nextnode(nextnode(target.nextSibling).nextSibling); 
if(ap.style.display != 'block' ){ 
ap.style.display = 'block'; 
target.className = 'ren' 
}else{ 
ap.style.display = 'none'; 
target.className = 'add' 
} 
break; 
} 
}); 
window.onload = function(){//页面加载时给有孩子结点的元素动态添加图标 
var labels = document.getElementById('root').getElementsByTagName('label'); 
for(var i=0;i<labels.length;i++){ 
var span = document.createElement('span'); 
span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;'; 
span.innerHTML = ' ' 
span.className = 'add'; 
if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL') 
labels[i].parentNode.insertBefore(span,labels[i]); 
else 
labels[i].className = 'rem' 
} 
} 
**/ 
//面向对象方法 
var Tree = function(o){ 
this.root = document.getElementById(o); 
this.labels = this.root.getElementsByTagName('label'); 
var that = this; 
this.int(); 
Tree.prototype.addEvent(this.root,'click',function(e){that.treeshow(e)}); 
} 
Tree.prototype = { 
int:function(){//初始化页面,加载时给有孩子结点的元素动态添加图标 
for(var i=0;i<this.labels.length;i++){ 
var span = document.createElement('span'); 
span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;'; 
span.innerHTML = ' ' 
span.className = 'add'; 
if(this.nextnode(this.labels[i].nextSibling)&&this.nextnode(this.labels[i].nextSibling).nodeName == 'UL') 
this.labels[i].parentNode.insertBefore(span,this.labels[i]); 
else 
this.labels[i].className = 'rem' 
} 
}, 
treeshow:function(e){ 
e = e||window.event; 
var target = e.target||e.srcElement; 
var tp = this.nextnode(target.parentNode.nextSibling); 
switch(target.nodeName){ 
case 'A'://点击A标签展开和收缩树形目录,并改变其样式 
if(tp&&tp.nodeName == 'UL'){ 
if(tp.style.display != 'block' ){ 
tp.style.display = 'block'; 
this.prevnode(target.parentNode.previousSibling).className = 'ren' 
}else{ 
tp.style.display = 'none'; 
this.prevnode(target.parentNode.previousSibling).className = 'add' 
} 
} 
break; 
case 'SPAN'://点击图标只展开或者收缩 
var ap = this.nextnode(this.nextnode(target.nextSibling).nextSibling); 
if(ap.style.display != 'block' ){ 
ap.style.display = 'block'; 
target.className = 'ren' 
}else{ 
ap.style.display = 'none'; 
target.className = 'add' 
} 
break; 
} 
}, 
addEvent:function(el,name,fn){//绑定事件 
if(el.addEventListener) return el.addEventListener(name,fn,false); 
return el.attachEvent('on'+name,fn); 
}, 
nextnode:function(node){//寻找下一个兄弟并剔除空的文本节点 
if(!node)return ; 
if(node.nodeType == 1) 
return node; 
if(node.nextSibling) 
return this.nextnode(node.nextSibling); 
}, 
prevnode:function(node){//寻找上一个兄弟并剔除空的文本节点 
if(!node)return ; 
if(node.nodeType == 1) 
return node; 
if(node.previousSibling) 
return prevnode(node.previousSibling); 
} 
} 
tree = new Tree("root");//实例化应用 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
js date 格式化
Feb 15 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 Javascript
简单实用jquery版三级联动select示例
Jul 04 #Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 #Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 #Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 #Javascript
js局部刷新页面时间具体实现
Jul 04 #Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 #Javascript
javascript闭包的高级使用方法实例
Jul 04 #Javascript
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python自动扫雷实现方法
2015/07/25 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
python中entry用法讲解
2020/12/04 Python
python 获取计算机的网卡信息
2021/02/18 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
司机的工作范围及职责
2013/11/13 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
运动会报道稿300字
2014/10/02 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
保护环境的宣传语
2015/07/13 职场文书
会议新闻稿
2015/07/17 职场文书