想用纯js写一个无限极树形控件的树形导航

来源：蜘蛛抓取(WebSpider) 时间：2017-11-02 09:14 标签： js无限极树形菜单
您的位置：
本文网址：
????????????JS无限极树形菜单,json格式、数组格式通用示例
修改了一下数据格式，是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/ charset=utf-8" /& &script type="text/javascript" src="/static/js/release/jquery-1.4.2.min.js"&&/script& &title&JS无级树树形菜单,json格式，数组格式通用&/title& &style type="text/css"& .menuTree { margin-left: -30 } .menuTree div { padding-left: 30 } .menuTree div ul { overflow: display: height: } .menuTree span { display: height: 25 line-height: 25 padding-left: 5 margin: 1px 0; cursor: border-bottom: 1px solid #CCC; } .menuTree span:hover { background-color: #e6e6e6; color: #cf0404; } .menuTree a { color: #333; text-decoration: } .menuTree a:hover { color: #06F; } .btn { height: 30 margin-top: 10 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. 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 += var kcn = 0; if (typeof o[k] == "object") { for (var kc in o[k]) { kcn++; } } if (kcn & 0) { forTree(o[k]); } str += "&/ul&&/div&"; }
} /*添加无级树*/ 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&
顶一下(0) 踩一下(0)
热门标签：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
就想写一个纯js的无限极递归树形导航，可是没写出来，有给个意见的吗？要自己的思路
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
先了解一下树型结构的html代码。练习通过JS生成这部分代码。之后加入自己逻辑，调优JS代码。
可以参考ZTREE，学习一下他们的实现方式和想法。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：拒绝访问 | www.codesec.net | 百度云加速
请打开cookies.
此网站 (www.codesec.net) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3b75fdfa102b661c-ua98).
重新安装浏览器，或使用别的浏览器

我要回帖

更多关于 js无限极树形菜单 的文章

 

随机推荐