JQuery實現折疊式菜單的詳細代碼

更新時間：2020年06月03日 15:20:42 作者：Q欣慰的三葉草

這篇文章主要介紹了JQuery實現折疊式菜單的詳細代碼,本文通過實例代碼通過兩種風格給大家詳細介紹，需要的朋友可以參考下

兩種風格：

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>
					<h2 class="menu-head">學科</h2>
					<ul class="menu-body">
						<li>語文</li>
						<li>數學</li>
						<li>英語</li>
						<li>體育</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">水果</h2>
					<ul class="menu-body">
						<li>蘋果</li>
						<li>香蕉</li>
						<li>草莓</li>
						<li>西瓜</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">蔬菜</h2>
					<ul class="menu-body">
						<li>番茄</li>
						<li>黃瓜</li>
						<li>生菜</li>
						<li>茄子</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">肉類</h2>
					<ul class="menu-body">
						<li>魚肉</li>
						<li>雞肉</li>
						<li>牛肉</li>
						<li>豬肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

運行結果圖：

在這里插入圖片描述

2：點菜單項，僅當前子菜單項可顯示，其余子菜單隱藏

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_實訓13-2_3_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();
				var parentli = $(this).parent();
				var lis=parentli.siblings();
				lis.children(".menu-body").hide();
			});
		});
	</script>
	<body>
		<div class="menu-list">
			<ul>
				<li>
					<h2 class="menu-head">學科</h2>
					<ul class="menu-body">
						<li>語文</li>
						<li>數學</li>
						<li>英語</li>
						<li>體育</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">水果</h2>
					<ul class="menu-body">
						<li>蘋果</li>
						<li>香蕉</li>
						<li>草莓</li>
						<li>西瓜</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">蔬菜</h2>
					<ul class="menu-body">
						<li>番茄</li>
						<li>黃瓜</li>
						<li>生菜</li>
						<li>茄子</li>
					</ul>
				</li>
				<li>
					<h2 class="menu-head">肉類</h2>
					<ul class="menu-body">
						<li>魚肉</li>
						<li>雞肉</li>
						<li>牛肉</li>
						<li>豬肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

運行結果圖：

在這里插入圖片描述