JS無制限極木メニュー、json形式、配列形式共通例

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
   
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>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" }; 
  <br>/*              DOM  */ 
  <br>var str = ""; 
  <br>var forTree = function (o) { 
  <br>var urlstr = ""; 
  <br>var keys = new Array(); 
  <br>for (var key in o) { 
  <br>keys.push(key); 
  <br>} 
  <br>for (var j = 0; j < keys.length; j++) { 
  <br>k = keys[j]; 
  <br>if (typeof o[k] == "object") { 
  <br>urlstr = "<div><span>" + k + "</span><ul>"; 
  <br>} else { 
  <br>urlstr = "<div><span>" + k + "=" + o[k] + "</span><ul>"; 
  <br>} 
  <br>str += urlstr; 
  <br>var kcn = 0; 
  <br>if (typeof o[k] == "object") { 
  <br>for (var kc in o[k]) { 
  <br>kcn++; 
  <br>} 
  <br>} 
  <br>if (kcn > 0) { 
  <br>forTree(o[k]); 
  <br>} 
  <br>str += "</ul></div>"; 
  <br>} 
  <br>return str; 
  <br>} 
  <br>/*     */ 
  <br>document.getElementById("menuTree").innerHTML = forTree(json); 
  <br>/*    */ 
  <br>var menuTree = function () { 
  <br>//         [+-] 
  <br>$("#menuTree ul").each(function (index, element) { 
  <br>var ulContent = $(element).html(); 
  <br>var spanContent = $(element).siblings("span").html(); 
  <br>if (ulContent) { 
  <br>$(element).siblings("span").html("[+] " + spanContent) 
  <br>} 
  <br>}); 
  <br> 
  <br> 
  <br>$("#menuTree").find("div span").click(function () { 
  <br>var ul = $(this).siblings("ul"); 
  <br>var spanStr = $(this).html(); 
  <br>var spanContent = spanStr.substr(3, spanStr.length); 
  <br>if (ul.find("div").html() != null) { 
  <br>if (ul.css("display") == "none") { 
  <br>ul.show(300); 
  <br>$(this).html("[-] " + spanContent); 
  <br>} else { 
  <br>ul.hide(300); 
  <br>$(this).html("[+] " + spanContent); 
  <br>} 
  <br>} 
  <br>}) 
  <br>} () 
  <br> 
  <br>/*  */ 
  <br>$("#btn_open").click(function () { 
  <br>$("#menuTree ul").show(300); 
  <br>curzt("-"); 
  <br>}) 
  <br>/*  */ 
  <br>$("#btn_close").click(function () { 
  <br>$("#menuTree ul").hide(300); 
  <br>curzt("+"); 
  <br>}) 
  <br>function curzt(v) { 
  <br>$("#menuTree span").each(function (index, element) { 
  <br>var ul = $(this).siblings("ul"); 
  <br>var spanStr = $(this).html(); 
  <br>var spanContent = spanStr.substr(3, spanStr.length); 
  <br>if (ul.find("div").html() != null) { 
  <br>$(this).html("[" + v + "] " + spanContent); 
  <br>} 
  <br>}); 
  <br>} 
  <br>