jQuery 树型菜单完整代码

 jQuery 树型菜单完整代码:



	
		
		
		jQuery树形菜单
		
		
	
	
		
		

数据分类

 JSON 假数据文件:

[
	{
		"name":"一级菜单1",
		"child":[
			{
				"name":"二级菜单1-1",
				"child":[]
			},{
				"name":"二级菜单1-2",
				"child":[
					{
						"name":"三级菜单1-2-1",
						"child":[]
					},{
						"name":"三级菜单1-2-2",
						"child":[]
					}
				]
			},{
				"name":"二级菜单1-3",
				"child":[]
			},{
				"name":"二级菜单1-4",
				"child":[]
			},{
				"name":"二级菜单1-5",
				"child":[
					{
						"name":"三级菜单1-5-1",
						"child":[]
					},{
						"name":"三级菜单1-5-2",
						"child":[]
					}
				]
			}
		]
	},{
		"name":"一级菜单2",
		"child":[
			{
				"name":"二级菜单2-1",
				"child":[
					{
						"name":"三级菜单2-1-1",
						"child":[]
					},{
						"name":"三级菜单2-1-2",
						"child":[]
					}
				]
			},{
				"name":"二级菜单2-2",
				"child":[]
			},{
				"name":"二级菜单2-3",
				"child":[]
			}
		]
	},{
		"name":"一级菜单3",
		"child":[]
	},{
		"name":"一级菜单4",
		"child":[
			{
				"name":"二级菜单4-1",
				"child":[]
			},{
				"name":"二级菜单4-2",
				"child":[
					{
						"name":"三级菜单4-2-1",
						"child":[]
					},{
						"name":"三级菜单4-2-2",
						"child":[]
					},{
						"name":"三级菜单4-2-3",
						"child":[]
					}
				]
			},{
				"name":"二级菜单4-3",
				"child":[]
			},{
				"name":"二级菜单4-4",
				"child":[]
			},{
				"name":"二级菜单4-5",
				"child":[]
			}
		]
	},{
		"name":"一级菜单5",
		"child":[]
	},{
		"name":"一级菜单6",
		"child":[
			{
				"name":"二级菜单6-1",
				"child":[
					{
						"name":"三级菜单6-1-1",
						"child":[]
					},{
						"name":"三级菜单6-1-2",
						"child":[]
					},{
						"name":"三级菜单6-1-3",
						"child":[]
					}
				]
			},{
				"name":"二级菜单6-2",
				"child":[]
			},{
				"name":"二级菜单6-3",
				"child":[]
			}
		]
	},{
		"name":"一级菜单7",
		"child":[
			{
				"name":"二级菜单7-1",
				"child":[]
			},{
				"name":"二级菜单7-2",
				"child":[]
			}
		]
	},{
		"name":"一级菜单8",
		"child":[]
	},{
		"name":"一级菜单9",
		"child":[]
	}
]

原创作者:吴小糖

创作时间:2023.11.7

你可能感兴趣的:(jquery,前端,javascript)