js|jquery实现动态菜单(二级菜单)

最新推荐文章于 2023-11-11 19:23:59 发布

清圆cc

最新推荐文章于 2023-11-11 19:23:59 发布

阅读量1.4k

点赞数

分类专栏：随笔文章标签： javascript jquery json

本文链接：https://blog.youkuaiyun.com/s1z2c3/article/details/125226540

版权

本文介绍了如何利用JavaScript和jQuery从JSON数据动态生成二级菜单。通过解析JSON文件并结合jQuery操作DOM元素，实现了菜单的动态展示。实际效果可在项目中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- jq。 根据自己jq放置的位置进行引入 -->
	<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		#menu-div {
     
			width: 300px;
			-ms-user-select: none;
			-moz-user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			margin-top: 5%;
		}
		
		.folder-menu {
     
			border-bottom: #EDEDED 1px solid;
			padding: 10px;
		}
		
		.menu-child {
     
			border-bottom: #EDEDED 1px solid;
			padding: 10px 10px 10px 30px;
		}
		
		.icom-img {
     
			width: 15px;
			height: 15px;
		}
		
		.menu-span {
     
			padding-left: 5px;
		}
		
		.hidden {
     
			display: none;
		}
		
		.bgc {
     
			background-color: #EDEDED;
		}
	</style>
	<body>
		<div id="menu-div">
			
			<!-- 静态菜单示例 已隐藏-->
			<div class="menu-item" style="display: none;">
				<div class="folder-menu<