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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
微信小程序用户授权最佳实践指南
May 08 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
php 中的4种标记风格介绍
2012/05/10 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
在python中画正态分布图像的实例
2019/07/08 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
英文版餐饮业求职信
2013/10/18 职场文书
给交警的表扬信
2014/01/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年管理工作总结
2014/11/22 职场文书
优秀团队申报材料
2014/12/26 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
初中生物教学反思
2016/02/20 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL