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中的107个基础知识收集整理 推荐
Mar 29 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 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
第八节 访问方式 [8]
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
php预定义常量
2006/12/25 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
30岁生日感言
2014/01/25 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
纪律教育月活动总结
2014/08/26 职场文书
Django实现聊天机器人
2021/05/31 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server