JavaScript json無限分級導航菜單 · 前端開發

JavaScript json無限分級導航菜單： ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <title>JavaScript json無限分級導航菜單</title> <style type="text/css"> #menujson div ul { overflow:hidden; display:none; height:auto; margin:0;} </style> </head> <body> <p id="menujson"></p> </body> </html> <script type="text/javascript"> var json = {"header":["","id","english","chinese","english_description","chinese_description","english_link","chinese_link","parent","sort","create_time","update_time"],"data":[["","{\"3\":{\"id\":\"3\",\"parent\":\"0\",\"english\":\"Australia\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"9\":{\"id\":\"9\",\"parent\":\"3\",\"english\":\"New South Wales\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"24\":{\"id\":\"24\",\"parent\":\"9\",\"english\":\"Sydney\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"25\":{\"id\":\"25\",\"parent\":\"9\",\"english\":\"Newcastle\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}},\"10\":{\"id\":\"10\",\"parent\":\"3\",\"english\":\"Queensland\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"26\":{\"id\":\"26\",\"parent\":\"10\",\"english\":\"City of Brisbane\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"27\":{\"id\":\"27\",\"parent\":\"26\",\"english\":\"Gold Coast\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}}}}}},\"1\":{\"child\":{\"2\":{\"id\":\"2\",\"parent\":\"1\",\"english\":\"Canada\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"7\":{\"id\":\"7\",\"parent\":\"2\",\"english\":\"Ontario\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"20\":{\"id\":\"20\",\"parent\":\"7\",\"english\":\"Toronto\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"21\":{\"id\":\"21\",\"parent\":\"7\",\"english\":\"Ottawa\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}}}},\"4\":{\"id\":\"4\",\"parent\":\"1\",\"english\":\"New York\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"11\":{\"id\":\"11\",\"parent\":\"4\",\"english\":\"New York city\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"12\":{\"id\":\"12\",\"parent\":\"11\",\"english\":\"Buffalo\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"13\":{\"child\":{\"5\":{\"id\":\"5\",\"parent\":\"13\",\"english\":\"Alabama\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"14\":{\"id\":\"14\",\"parent\":\"5\",\"english\":\"Birmingham\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"16\":{\"id\":\"16\",\"parent\":\"5\",\"english\":\"Huntsville\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}}},\"id\":\"13\",\"parent\":\"12\",\"english\":\"Albany\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}}}}}},\"6\":{\"id\":\"6\",\"parent\":\"1\",\"english\":\"California\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"17\":{\"id\":\"17\",\"parent\":\"6\",\"english\":\"Los Angeles\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"18\":{\"id\":\"18\",\"parent\":\"6\",\"english\":\"San Francisco\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"19\":{\"id\":\"19\",\"parent\":\"6\",\"english\":\"San Diego\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}},\"8\":{\"id\":\"8\",\"parent\":\"1\",\"english\":\"British Columbia\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\",\"child\":{\"15\":{\"id\":\"15\",\"parent\":\"8\",\"english\":\"Montgomery\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"22\":{\"id\":\"22\",\"parent\":\"8\",\"english\":\"Vancouver\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"},\"23\":{\"id\":\"23\",\"parent\":\"8\",\"english\":\"Victoria\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}}},\"id\":\"1\",\"parent\":\"0\",\"english\":\"USA\",\"english_link\":\"https:\\/\\/www.baidu.com\\/\"}}"]]} var str = String(json['data']); str = str.substr(1); jsonArr = JSON.parse(str); console.log(jsonArr); var str = ""; function menuArr(jsonArr) { var obj = jsonArr; for(var key in obj) { var urlstr = ""; try{ if(typeof obj[key]["child"] == "undefined"){ urlstr = '<div><span><a href="'+obj[key]['english_link']+'" target="_blank">'+obj[key]['english']+'</a></span><ul>'; }else{ urlstr = "<div><span> + "+obj[key]['english']+"</span><ul>"; } str += urlstr; if(obj[key]["child"] != null) { menuArr(obj[key]["child"]); // console.log('child'); } str += "</ul></div>"; }catch(e){} } return str; } document.getElementById("menujson").innerHTML = menuArr(jsonArr); var menujson = function(){ $("#menujson").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); } } }) }() </script> ```