JS無限極樹形菜單,json格式、數組格式通用示例

本文為大家介紹下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>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20277.html