Heim > Web-Frontend > js-Tutorial > JS无限极树形菜单,json格式、数组格式通用示例_javascript技巧

JS无限极树形菜单,json格式、数组格式通用示例_javascript技巧

WBOY
Freigeben: 2016-05-16 17:27:50
Original
1288 Leute haben es durchsucht

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

复制代码 代码如下:







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




  





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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage