• jQuery 树型菜单完整代码

     jQuery 树型菜单完整代码：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    6. 		<title>jQuery树形菜单title>
    7. 		<script src="./js/jquery-3.6.0.js">script>
    8. 		<style type="text/css">
    9. 			/* 初始化页面 */
    10. 			* {
    11. 				margin: 0;
    12. 				padding: 0;
    13. 				box-sizing: border-box;
    14. 			}
    15. 			
    16. 			/* 设置背景页面 */
    17. 			body {
    18. 				width: 100%;
    19. 				min-height: 100vh;
    20. 				background-color: #029688;
    21. 				display: flex;
    22. 				justify-content: center;
    23. 			}
    24. 			
    25. 			/* 设置树形菜单宽度 */
    26. 			.tree {
    27. 				width: 60%;
    28. 			}
    29. 			
    30. 			/* 设置树形菜单标题 */
    31. 			.tree h1 {
    32. 				width: 100%;
    33. 				height: 60px;
    34. 				text-align: center;
    35. 				line-height: 60px;
    36. 				color: #F7F29B;
    37. 				font-family: "楷体";
    38. 				letter-spacing: 3px;
    39. 			}
    40. 			
    41. 			/* 设置标题下边的水平线 */
    42. 			.tree i{
    43. 				display: block;
    44. 				width: 100%;
    45. 				height: 1px;
    46. 				background-color: #D7DBDB;
    47. 				position: relative;
    48. 			}
    49. 			
    50. 			/* 设置标题水平线中心的菱形 */
    51. 			.tree i::before{
    52. 				content: "";
    53. 				width: 7px;
    54. 				height: 7px;
    55. 				transform: rotate(45deg);
    56. 				background-color: #D7DBDB;
    57. 				position: absolute;
    58. 				top: -3px;
    59. 				left: 50%;
    60. 				margin-left: -3.5px;
    61. 			}
    62. 			
    63. 			/* 设置树形菜单列表 */
    64. 			.tree-list{
    65. 				width: 100%;
    66. 				margin-top: 20px;
    67. 			}
    68. 			
    69. 			/* 设置列表缩进效果 */
    70. 			.tree-list div{
    71. 				width: 100%;
    72. 				padding-left: 40px;
    73. 				position: relative;
    74. 				display: none;
    75. 			}
    76. 			
    77. 			/* 设置列表名称 */
    78. 			.tree-list p{
    79. 				display: flex;
    80. 				justify-content: space-between;
    81. 				width: 100%;
    82. 				height: 40px;
    83. 				line-height: 40px;
    84. 				color: #F7FBFB;
    85. 			}
    86. 			
    87. 			/* 设置箭头图片 */
    88. 			.tree-list img{
    89. 				width: 14px;
    90. 				height: 14px;
    91. 				margin: 13px;
    92. 				transition: all 0.3s;
    93. 			}
    94. 			
    95. 			/* 设置箭头图片旋转效果 */
    96. 			.tree-list .active{
    97. 				transform: rotate(180deg);
    98. 			}
    99. 			
    100. 			/* 设置鼠标悬浮样式 */
    101. 			.tree-list p:hover{
    102. 				background-color: rgba(80, 220, 220, 0.2);
    103. 			}
    104. 			
    105. 			/* 设置列表分类水平线 */
    106. 			.tree-list>em{
    107. 				display: block;
    108. 				width: 100%;
    109. 				height: 2px;
    110. 				background-color: #D7DBDB;
    111. 				margin: 5px 0;
    112. 			}
    113. 		style>
    114. 	head>
    115. 	<body>
    116. 		
    117. 		<div class="tree">
    118. 			<h1>数据分类h1>
    119. 			<i>i>
    120. 			<div class="tree-list">div>
    121. 		div>
    122. 		
    123. 		<script type="text/javascript">
    124. 			
    125. 			// 设置变量用于存储拼接的标签字符串
    126. 			let content = "";
    127. 			
    128. 			// 请求本地 json 文件
    129. 			$.ajax({
    130. 				type:"GET",
    131. 				url:"./js/data.json",
    132. 				success:function(res){
    133. 					console.log(res);
    134. 					// 调用数据拼接函数
    135. 					render(res);
    136. 					// 将字符串输出到页面中
    137. 					$(".tree-list").html(content)
    138. 				}
    139. 			})
    140. 			
    141. 			// 数据拼接函数 将数据拼接成标签字符串
    142. 			function render(arr){
    143. 				for(let item of arr){
    144. 					if(item.child != undefined && item.child.length > 0){
    145. 						content += `
      ${item.name}
    146. 								
      `;
    147. 						render(item.child);
    148. 						content += `
      `;
  • }else{
  • content += `

    ${item.name}

    `    ;
  • }
  • }
  • }
  • // 列表显示隐藏事件
  • function cut(e){
  • e = e || window.event;
  • let targets = e.target || e.srcElemet;
  • $(targets).next("div").toggle(300);
  • $(targets).find("img").toggleClass("active");
  • }
  • // 列表跳转事件
  • function skip(){
  • location.href = "./index.html";
  • }
  • script>
  • body>
  • html>

    •  JSON 假数据文件：

    1. [
    2. 	{
    3. 		"name":"一级菜单1",
    4. 		"child":[
    5. 			{
    6. 				"name":"二级菜单1-1",
    7. 				"child":[]
    8. 			},{
    9. 				"name":"二级菜单1-2",
    10. 				"child":[
    11. 					{
    12. 						"name":"三级菜单1-2-1",
    13. 						"child":[]
    14. 					},{
    15. 						"name":"三级菜单1-2-2",
    16. 						"child":[]
    17. 					}
    18. 				]
    19. 			},{
    20. 				"name":"二级菜单1-3",
    21. 				"child":[]
    22. 			},{
    23. 				"name":"二级菜单1-4",
    24. 				"child":[]
    25. 			},{
    26. 				"name":"二级菜单1-5",
    27. 				"child":[
    28. 					{
    29. 						"name":"三级菜单1-5-1",
    30. 						"child":[]
    31. 					},{
    32. 						"name":"三级菜单1-5-2",
    33. 						"child":[]
    34. 					}
    35. 				]
    36. 			}
    37. 		]
    38. 	},{
    39. 		"name":"一级菜单2",
    40. 		"child":[
    41. 			{
    42. 				"name":"二级菜单2-1",
    43. 				"child":[
    44. 					{
    45. 						"name":"三级菜单2-1-1",
    46. 						"child":[]
    47. 					},{
    48. 						"name":"三级菜单2-1-2",
    49. 						"child":[]
    50. 					}
    51. 				]
    52. 			},{
    53. 				"name":"二级菜单2-2",
    54. 				"child":[]
    55. 			},{
    56. 				"name":"二级菜单2-3",
    57. 				"child":[]
    58. 			}
    59. 		]
    60. 	},{
    61. 		"name":"一级菜单3",
    62. 		"child":[]
    63. 	},{
    64. 		"name":"一级菜单4",
    65. 		"child":[
    66. 			{
    67. 				"name":"二级菜单4-1",
    68. 				"child":[]
    69. 			},{
    70. 				"name":"二级菜单4-2",
    71. 				"child":[
    72. 					{
    73. 						"name":"三级菜单4-2-1",
    74. 						"child":[]
    75. 					},{
    76. 						"name":"三级菜单4-2-2",
    77. 						"child":[]
    78. 					},{
    79. 						"name":"三级菜单4-2-3",
    80. 						"child":[]
    81. 					}
    82. 				]
    83. 			},{
    84. 				"name":"二级菜单4-3",
    85. 				"child":[]
    86. 			},{
    87. 				"name":"二级菜单4-4",
    88. 				"child":[]
    89. 			},{
    90. 				"name":"二级菜单4-5",
    91. 				"child":[]
    92. 			}
    93. 		]
    94. 	},{
    95. 		"name":"一级菜单5",
    96. 		"child":[]
    97. 	},{
    98. 		"name":"一级菜单6",
    99. 		"child":[
    100. 			{
    101. 				"name":"二级菜单6-1",
    102. 				"child":[
    103. 					{
    104. 						"name":"三级菜单6-1-1",
    105. 						"child":[]
    106. 					},{
    107. 						"name":"三级菜单6-1-2",
    108. 						"child":[]
    109. 					},{
    110. 						"name":"三级菜单6-1-3",
    111. 						"child":[]
    112. 					}
    113. 				]
    114. 			},{
    115. 				"name":"二级菜单6-2",
    116. 				"child":[]
    117. 			},{
    118. 				"name":"二级菜单6-3",
    119. 				"child":[]
    120. 			}
    121. 		]
    122. 	},{
    123. 		"name":"一级菜单7",
    124. 		"child":[
    125. 			{
    126. 				"name":"二级菜单7-1",
    127. 				"child":[]
    128. 			},{
    129. 				"name":"二级菜单7-2",
    130. 				"child":[]
    131. 			}
    132. 		]
    133. 	},{
    134. 		"name":"一级菜单8",
    135. 		"child":[]
    136. 	},{
    137. 		"name":"一级菜单9",
    138. 		"child":[]
    139. 	}
    140. ]

    原创作者：吴小糖

    创作时间：2023.11.7

  • 相关阅读:
    HELM FLOW CONTROL practical operation
    如何为谷歌seo打好基础？
    【Spring】IoC容器 控制反转 与 DI依赖注入 XML实现版本 第二期
    基于Open3D的点云处理22-非阻塞可视化/动态可视化
    LeetCode【69. x 的平方根】
    知识图谱-KGE-对抗模型-2018：KBGAN
    05_利用神经网实现MINST手写数字识别
    python经典百题之分数评级
    2024HW ---＞蓝队面试题
    行业资讯 | 入门revit软件需要理清哪些概念。
  • 原文地址：https://blog.csdn.net/xiaowude_boke/article/details/134472100