用代码分析JQuery如何实现折叠式菜单-创新互联

这篇文章主要用代码分析JQuery如何实现折叠式菜单，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

创新互联主营安溪网站建设的网络公司,主营网站建设方案,成都App制作,安溪h5小程序设计搭建,安溪网站营销推广欢迎安溪等地区企业咨询

两种风格：

1：点菜单项，每个子菜单项都可显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_实训13-2_2_180701802230_18计算机2班</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.menu-list {
			width: 300px;
			margin: 60px auto;
			border: 2px solid #bbffff;
		}

		.menu-head {
			background-color: #aaaaff;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}

		.menu-body>li {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	</style>
	<script src="../JQuery/jquery.js"></script>
	<script>
		$(function() {
			$(".menu-body").hide().eq(0).show();
			$(".menu-head").click(function() {
				// 1:
				$(this).next().toggle();
				// 2:
				// $(this).next().show();
			});
		});
	</script>
	<body>
		<div class="menu-list">
			<ul>
				<li>
					<h3 class="menu-head">学科</h3>
					<ul class="menu-body">
						<li>语文</li>
						<li>数学</li>
						<li>英语</li>
						<li>体育</li>
					</ul>
				</li>
				<li>
					<h3 class="menu-head">水果</h3>
					<ul class="menu-body">
						<li>苹果</li>
						<li>香蕉</li>
						<li>草莓</li>
						<li>西瓜</li>
					</ul>
				</li>
				<li>
					<h3 class="menu-head">蔬菜</h3>
					<ul class="menu-body">
						<li>番茄</li>
						<li>黄瓜</li>
						<li>生菜</li>
						<li>茄子</li>
					</ul>
				</li>
				<li>
					<h3 class="menu-head">肉类</h3>
					<ul class="menu-body">
						<li>鱼肉</li>
						<li>鸡肉</li>
						<li>牛肉</li>
						<li>猪肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。