一个简单的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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
微信小程序删除处理详解
Aug 16 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 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
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python能在浏览器能运行吗
2020/06/17 Python
Python 防止死锁的方法
2020/07/29 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
给民警的表扬信
2014/01/08 职场文书
团支部推优材料
2014/05/21 职场文书
大学生自我评价范文
2015/03/03 职场文书
小平您好观后感
2015/06/09 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
redis 查看所有的key方式
2021/05/07 Redis