php json无限极下拉框_JS无限极树形菜单,json格式、数组格式通用示例

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

JS无级树树形菜单,json格式，数组格式通用

.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;

}

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 = "

" + k + "

• ";

} else {

urlstr = "

" + k + "=" + o[k] + "

• ";

}

str += urlstr;

var kcn = 0;

if (typeof o[k] == "object") {

for (var kc in o[k]) {

kcn++;

}

}

if (kcn > 0) {

forTree(o[k]);

}

str += "

";

}

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);

}

});

}