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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
简单三步,搞掂内存泄漏
Mar 10 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
基于node.js的快速开发透明代理
Dec 25 Javascript
JS跨域代码片段
Aug 30 Javascript
Javascript的比较汇总
Jul 25 Javascript
前端微信支付js代码
Jul 25 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
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 全局变量范围分析
2009/08/07 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
python插入数据到列表的方法
2015/04/30 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
详解python metaclass(元类)
2020/08/13 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
管理部部长岗位职责
2013/12/05 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
nginx七层负载均衡配置详解
2022/07/15 Servers