JS无限极树形菜单,json格式、数组格式通用示例


Posted in Javascript onJuly 30, 2013

修改了一下数据格式,是json和数组或者混合型的数据都通用,不用特定key等

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://d1.lashouimg.com/static/js/release/jquery-1.4.2.min.js"></script> 
<title>JS无级树树形菜单,json格式,数组格式通用</title> 
<style type="text/css"> 
.menuTree 
{ 
margin-left: -30px; 
} 
.menuTree div 
{ 
padding-left: 30px; 
} 
.menuTree div ul 
{ 
overflow: hidden; 
display: none; 
height: auto; 
} 
.menuTree span 
{ 
display: block; 
height: 25px; 
line-height: 25px; 
padding-left: 5px; 
margin: 1px 0; 
cursor: pointer; 
border-bottom: 1px solid #CCC; 
} 
.menuTree span:hover 
{ 
background-color: #e6e6e6; 
color: #cf0404; 
} 
.menuTree a 
{ 
color: #333; 
text-decoration: none; 
} 
.menuTree a:hover 
{ 
color: #06F; 
} 
.btn 
{ 
height: 30px; 
margin-top: 10px; 
border-bottom: 1px solid #CCC; 
} 
</style> 
</head> 
<body> 
<div class="btn"> 
<input name="" type="button" id="btn_open" value="全部展开" />   
<input name="" type="button" id="btn_close" value="全部收缩" /> 
</div> 
<div id="menuTree" class="menuTree"> 
</div> 
</body> 
</html> 
<script type="text/javascript"> 
var json = { "navnums": { "0": "8051", "4": "4969", "8": "206", "5": "126", "9": "2174" }, "hotwords": "美食", "mvonline": [9, 8, [9, 8, 7, 6, 5, 4], 6, 5, 4], "district_online": "1", "zone_online": "1", "subway_online": "1", "city_online": "1" }; 
/*递归实现获取无级树数据并生成DOM结构*/ 
var str = ""; 
var forTree = function (o) { 
var urlstr = ""; 
var keys = new Array(); 
for (var key in o) { 
keys.push(key); 
} 
for (var j = 0; j < keys.length; j++) { 
k = keys[j]; 
if (typeof o[k] == "object") { 
urlstr = "<div><span>" + k + "</span><ul>"; 
} else { 
urlstr = "<div><span>" + k + "=" + o[k] + "</span><ul>"; 
} 
str += urlstr; 
var kcn = 0; 
if (typeof o[k] == "object") { 
for (var kc in o[k]) { 
kcn++; 
} 
} 
if (kcn > 0) { 
forTree(o[k]); 
} 
str += "</ul></div>"; 
} 
return str; 
} 
/*添加无级树*/ 
document.getElementById("menuTree").innerHTML = forTree(json); 
/*树形菜单*/ 
var menuTree = function () { 
//给有子对象的元素加[+-] 
$("#menuTree ul").each(function (index, element) { 
var ulContent = $(element).html(); 
var spanContent = $(element).siblings("span").html(); 
if (ulContent) { 
$(element).siblings("span").html("[+] " + spanContent) 
} 
}); 

$("#menuTree").find("div span").click(function () { 
var ul = $(this).siblings("ul"); 
var spanStr = $(this).html(); 
var spanContent = spanStr.substr(3, spanStr.length); 
if (ul.find("div").html() != null) { 
if (ul.css("display") == "none") { 
ul.show(300); 
$(this).html("[-] " + spanContent); 
} else { 
ul.hide(300); 
$(this).html("[+] " + spanContent); 
} 
} 
}) 
} () 
/*展开*/ 
$("#btn_open").click(function () { 
$("#menuTree ul").show(300); 
curzt("-"); 
}) 
/*收缩*/ 
$("#btn_close").click(function () { 
$("#menuTree ul").hide(300); 
curzt("+"); 
}) 
function curzt(v) { 
$("#menuTree span").each(function (index, element) { 
var ul = $(this).siblings("ul"); 
var spanStr = $(this).html(); 
var spanContent = spanStr.substr(3, spanStr.length); 
if (ul.find("div").html() != null) { 
$(this).html("[" + v + "] " + spanContent); 
} 
}); 
} 
</script>
Javascript 相关文章推荐
JavaScript中的prototype使用说明
Apr 13 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
javascript对象的创建和访问
Mar 08 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
js中widow.open()方法使用详解
Jul 30 #Javascript
Extjs NumberField后面加单位实现思路
Jul 30 #Javascript
Js中获取frames中的元素示例代码
Jul 30 #Javascript
js中的屏蔽的使用示例
Jul 30 #Javascript
使用js正则控制input标签只允许输入的值
Jul 29 #Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 #Javascript
js保留两位小数使用toFixed实现
Jul 29 #Javascript
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php遍历目录viewDir函数
2009/12/15 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
python self,cls,decorator的理解
2009/07/13 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python 串行执行和并行执行实例
2020/04/30 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
查摆剖析材料范文
2014/09/30 职场文书
匿名信格式范文
2015/05/27 职场文书
招商银行工作证明
2015/06/17 职场文书
从事会计工作年限证明
2015/06/23 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
MySQL自定义函数及触发器
2022/08/05 MySQL