首頁 > web前端 > js教程 > JS無限極樹形選單,json格式、陣列格式通用範例_javascript技巧

JS無限極樹形選單,json格式、陣列格式通用範例_javascript技巧

WBOY
發布: 2016-05-16 17:27:50
原創
1298 人瀏覽過

修改了一下資料格式,是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); } }); }
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板