本文为大家介绍下JS无级树形菜单的实现
修改了一下数据格式
是json和数组或者混合型的数据都通用
不用特定key等
想学习的朋友可以参考下
修改了一下数据格式是json和数组或者混合型的数据都通用不用特定key等
复制代码 代码如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<script type="text/javascript" src="
<title>JS无级树树形菜单json格式数组格式通用</title>
<style type="text/css">
menuTree
{
marginleft: px;
}
menuTree div
{
paddingleft: px;
}
menuTree div ul
{
overflow: hidden;
display: none;
height: auto;
}
menuTree span
{
display: block;
height: px;
lineheight: px;
paddingleft: px;
margin: px ;
cursor: pointer;
borderbottom: px solid #CCC;
}
menuTree span:hover
{
backgroundcolor: #eee;
color: #cf;
}
menuTree a
{
color: #;
textdecoration: none;
}
menuTree a:hover
{
color: #F;
}
btn
{
height: px;
margintop: px;
borderbottom: px 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": { "": "" "": "" "": "" "": "" "": "" } "hotwords": "美食" "mvonline": [ [ ] ] "district_online": "" "zone_online": "" "subway_online": "" "city_online": "" };
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function (o) {
var urlstr = "";
var keys = new Array();
for (var key in o) {
keyspush(key);
}
for (var j = ; j < keyslength; 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 = ;
if (typeof o[k] == "object") {
for (var kc in o[k]) {
kcn++;
}
}
if (kcn > ) {
forTree(o[k]);
}
str += "</ul></div>";
}
return str;
}
/*添加无级树*/
documentgetElementById("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 = spanStrsubstr( spanStrlength);
if (ulfind("div")html() != null) {
if (ulcss("display") == "none") {
ulshow();
$(this)html("[] " + spanContent);
} else {
ulhide();
$(this)html("[+] " + spanContent);
}
}
})
} ()
/*展开*/
$("#btn_open")click(function () {
$("#menuTree ul")show();
curzt("");
})
/*收缩*/
$("#btn_close")click(function () {
$("#menuTree ul")hide();
curzt("+");
})
function curzt(v) {
$("#menuTree span")each(function (index element) {
var ul = $(this)siblings("ul");
var spanStr = $(this)html();
var spanContent = spanStrsubstr( spanStrlength);
if (ulfind("div")html() != null) {
$(this)html("[" + v + "] " + spanContent);
}
});
}
</script>
