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>
```
- 前端开发概要
- Vue
- Vue.js
- Vue的模板
- Vue的属性绑定和双向数据绑定
- Vue的计算属性和侦听器
- v-show和v-if
- Vue简单to do list
- Vue简单to do list组件拆分
- Vue简单to do list组件和实例
- Vue简单to do list的删除功能
- Vue的点击事件，侧重操作数据
- vue中定时器设置和关闭页面时关闭定时器
- axios
- Vue Element-ui
- HTML转Vue
- Vue3
- Vue开发简易权限认证
- demo
- Vue常用命令
- Vue项目1
- 前端面试
- 算法题
- Vue框架原理
- 前端基础
- 安全
- 模拟面试一面
- JavaScript和MySQL
- JavaScript和Redis
- HTML+CSS入门到案例
- 无限级导航栏案例开发
- iframe嵌套网页全屏显示
- CSS定位显示图片不同部分
- Select option 跳转
- 网页显示JavaScript
- 简单文本编辑器
- 用纯js实现一个文本编辑器
- 视频，音频
- frame包住目标网站
- Web重定向
- HCJ
- HTML
- CSS
- jQuery
- Bootstrap
- CSS实例
- 【CSS3】8款好看的纯CSS3搜索框
- 小工具
- menu_icon
- JavaScript
- JS获取屏幕尺寸
- JavaScript简易录播图
- 预设select option的值
- HTML和CSS基础
- APP开发
- uni-app
- nw.js
- CSS基础
- CSS hover 菜单
- CSS Menu
- CSS Menu 2
- Bootsrtap
- 图片展示
- 固定topbar
- JavaScript
- 当前页select option value跳转页面
- JavaScript点击一级菜单打开和关闭二级菜单
- JavaScript json无限分级导航菜单
- JavaScript獲取url
- 其他
- JS获取复选框中当前选中的值
- JS array 遍歷
- JavaScript無刷新修改url
- localStorage
- js版的in_array的实现方法
- JavaScript修改URL參數
- JSON
- jQuery教程
- 用PHP+MySQL+jQuery+Ajax拖放排序修改数据库
- jQuery实例
- jQuery
- jQuery实例1
- jQuery slider实例
- jQuery加载更多功能
- jQuery前后元素移动
- datatables前端搜索功能
- jQuery select value跳转页面
- jQuery局部刷新
- jQuery点击自身以外关闭弹出窗
- 点击增加class
- 点击增加和删除class
- 固定向右menu
- jQuery多級menu
- 用Jquery和Json实现多语言切换
- jQuery to do list
- jQuery slideToggle
- jQuery点击显示和隐藏CSS
- js如何获取点击标签里的值
- JavaScript和JQuery获取DIV的值
- jQuery加载公用文件
- createElement添加内容
- createElement添加内容 - 复制案例
- jQuery 遍历案例
- HBuilder
- 案例
- Slider
- html5 video
- Ajax
- Ajax案例1： 无优化XMLHttpRequest
- Ajax案例2： json的XMLHttpRequest
- Ajax案例3： jQuery json的XMLHttpRequest
- Ajax案例4： H5 jQuery的XMLHttpRequest
- Ajax案例5：无跳转刷新容器获取外部内容
- Ajax搜索
- 两种Ajax获取数据方式
- Cookie
- 微信小程序
- 基础的GET和POST页面
- Node.js
- AngularJS
- AngularJS案例
- AngularJS案例1
- ReactJS
- React native
- API
- Postman API
- Web前端常用图标
- Photoshop
- 前端cnd
- 前端工具
- 前端模板
- Export data
- 前端工程化
- 固定菜單
- 404頁面
- test
- JavaScript框架
- 瀏覽器兼容性