JS Infinitus 트리 메뉴, json 형식, 배열 형식 공통 예제_javascript 기술

" id= "btn_open" value="모두 확장" />



type=" text/javascript">
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 = ""
varkeys = new Array()
for(var key in o) ) {
keys.push(key);
}
for (var j = 0; j k = 키[j]; (typeof o [k] == "object") {
urlstr = "

" k "

"
} else {
urlstr = "
" k "=" o[k] "
"
str =
var kcn = 0 ;
if (typeof o[k] == "객체") {
for (var kc in o[k]) {
kcn
}
}
if ( kcn > 0) {
forTree(o[k]);
str = "
"
}
return str; 🎜>}
/*무단계 트리 추가*/
document.getElementById("menuTree").innerHTML = forTree(json)
/*Tree menu*/
var menuTree = function ( ) {
//하위 개체가 있는 요소에 [-] 추가
$("#menuTree ul").each(function (index, element) {
var ulContent = $(element).html () ;
varspanContent = $(element).siblings("span").html()
if (ulContent) {
$(element).siblings("span").html( "[ ] "spanContent)
}
})


$("#menuTree").find("divspan").click(function () {
var ul = $(this).siblings("ul");
varspanStr = $(this).html()
varspanContent=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);
}
}
})
} ()

/*expand*/
$("#btn_open").click(function () {
$( "#menuTree ul").show(300);
curzt("-")
})
/*shrink*/
$("#btn_close").click( function ( ) {
$("#menuTree ul").hide(300);
curzt(" ")
})
function curzt(v) {
$(" #menuTree span").each(function (index, element) {
var ul = $(this).siblings("ul");
varspanStr = $(this).html();
varspanContent =spanStr.substr(3,spanStr.length);
if (ul.find("div").html() != null) {
$(this).html("[" v " ] "spanContent);
}
}