一个简单的js树形菜单


Posted in Javascript onDecember 09, 2011

我练习一下,以免不时之需。

树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已。

一个简单的js树形菜单

上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了。

给个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
body{ font-size: 12px;} 
h2,h3{ margin: 0;} 
ul{ margin: 0; padding: 0; list-style: none; } 
#outer_wrap li{ padding-left: 30px; line-height: 24px;} 
.controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;} 
</style> 
</head> 
<body> 
<ul id="outer_wrap"> 
<li> 
<h2>标题1</h2> 
<ul> 
<li>内容1</li> 
<li>内容2</li> 
<li>内容3</li> 
<li>内容4</li> 
<li> 
<h3>标题1_1</h3> 
<ul> 
<li>内容1_1</li> 
<li>内容1_2</li> 
<li>内容1_3</li> 
<li>内容1_4</li> 
</ul> 
</li> 
<li> 
<h3>标题1_2</h3> 
<ul> 
<li>内容1_1</li> 
<li>内容1_2</li> 
<li>内容1_3</li> 
<li>内容1_4</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

然后添加事件:
var innerText = document.innerText ? 'innerText' : 'textContent'; 
var span = document.createElement('span'); 
span[innerText] = '-'; 
span.className = 'controlSymbol'; function $(id){ 
return document.getElementById(id); 
} 
function $_(){ 
var args = arguments; 
var ret = []; 
for(var i = 0; i < args.length; i++){ 
var temp = document.getElementsByTagName(args[i]); 
try{ 
ret = ret.concat(Array.prototype.slice.call(temp,0)); 
}catch(e){ 
for(var j = 0; j < temp.length; j++){ 
ret.push(temp[j]); 
} 
} 
} 
return ret; 
} 
function addSymbol(h){ 
var innerSpan = span.cloneNode(true); 
h.insertBefore(innerSpan,h.firstChild); 
} 
function next(el){ 
while(el.nextSibling){ 
if(el.nextSibling.nodeType == 1){ 
return el.nextSibling; 
} 
el = el.nextSibling; 
} 
return null; 
} 
var outerWrap = $('outer_wrap'); 
var hs = $_('h2','h3'); 
for(var i = 0 ; i < hs.length; i++){ 
addSymbol(hs[i]); 
} 
outerWrap.onclick = function(event){ 
event = event || window.event; 
var t = event.target || event.srcElement; 
if(t.className == 'controlSymbol'){ 
var sn = next(t.parentNode); 
var snStyle = next(t.parentNode).style; 
snStyle.display = (snStyle.display == 'block' || snStyle.display == '') ? 'none' : 'block'; 
t[innerText] = t[innerText] == '+' ? '-':'+'; 
} 
}

不过用的多的可能是动态的添加菜单,也就是动态的生成HTML序列。

一个例子:

var tree = { 
'标题2':[ 
'内容1', 
'内容2', 
'内容3', 
'内容4', 
{'标题2_1':['内容2_1','内容2_2','内容2_3','内容2_4']}, 
{'标题2_2':['内容2_1','内容2_2','内容2_3','内容2_4']}, 
'内容5' 
] 
} 
var fragment = document.createElement('ul'); 
function concatTree(tree){ 
var array = []; 
for(var key in tree){ 
array.push('<li><h3>'); 
array.push(key); 
array.push('</h3><ul>'); 
for(var i = 0; i < tree[key].length; i++){ 
if(tree[key][i].constructor == Object){ 
array = array.concat(concatTree(tree[key][i])); 
}else{ 
array.push('<li>'); 
array.push(tree[key][i]); 
array.push('</li>'); 
} 
} 
array.push('</ul></li>'); 
} 
return array; 
} 
fragment.innerHTML = concatTree(tree).join(''); 
$('outer_wrap').appendChild(fragment.firstChild);

像上面的方法也可以用来生成表格,扯远了,比如
var oArray = { 
thead : ['标题一','标题二','标题三','标题四'], 
tbody : [ 
[1,2,3,4], 
[5,6,7,8], 
[9,10,11,12], 
[13,14,15,16], 
[17,18,19,20], 
[21,22,23,24] 
], 
tfoot : [25,26,27,28] 
} 
function createTable(arr){ 
var html = []; 
html.push('<table>'); 
for(var key in arr){ 
html.push('<'+key + '>'); 
if(key == 'thead'){ 
assemTag(arr[key],html,'th') 
}else if(key == 'tfoot'){ 
assemTag(arr[key],html,'td') 
}else if(key == 'tbody'){ 
for(var k = 0, len_1 = arr[key].length; k < len_1; k++){ 
assemTag(arr[key][k],html,'td') 
} 
} 
html.push('</'+key + '>'); 
} 
html.push('</table>'); 
var temp = document.createElement('div'); 
temp.innerHTML = html.join(''); 
return temp.firstChild; 
} 
function assemTag(array,html,tag){ 
html.push('<tr>'); 
var s = '<' + tag + '>'; 
var e = '</' + tag + '>'; 
for(var j = 0, len = array.length; j < len; j++){ 
html.push(s); 
html.push(array[j]); 
html.push(e); 
} 
html.push('</tr>'); 
} 
document.body.appendChild(createTable(oArray));

一般可以直接创建一个节点元素,然后直接设置innerHTML,不过innerHTML虽说是IE先搞起的,但是IE又最不彻底,对于table和tr是不可设置innerHTML的(只读),所以只能假div之手了。
Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 #Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 #Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 #Javascript
JQuery循环滚动图片代码
Dec 08 #Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 #Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 #Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
You might like
德劲1107的电路分析与打磨
2021/03/02 无线电
php PDO中文乱码解决办法
2009/07/20 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php自动加载机制的深入分析
2013/06/08 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
辩论赛主持词
2014/03/18 职场文书
党员承诺书内容
2014/03/26 职场文书
总经理任命书
2014/03/29 职场文书
2014年营销工作总结
2014/11/22 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
综合实践活动报告
2015/02/05 职场文书
员工辞职信范文
2015/03/02 职场文书