溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單

發(fā)布時(shí)間：2020-07-18 16:01:04 來(lái)源：億速云 閱讀：166 作者：小豬 欄目：web開(kāi)發(fā)

這篇文章主要用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

兩種風(fēng)格：

1：點(diǎn)菜單項(xiàng)，每個(gè)子菜單項(xiàng)都可顯示

用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_實(shí)訓(xùn)13-2_2_180701802230_18計(jì)算機(jī)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">學(xué)科</h3>
					<ul class="menu-body">
						<li>語(yǔ)文</li>
						<li>數(shù)學(xué)</li>
						<li>英語(yǔ)</li>
						<li>體育</li>
					</ul>
				</li>
				<li>
					<h3 class="menu-head">水果</h3>
					<ul class="menu-body">
						<li>蘋(píng)果</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>魚(yú)肉</li>
						<li>雞肉</li>
						<li>牛肉</li>
						<li>豬肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

運(yùn)行結(jié)果圖：

用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單

2：點(diǎn)菜單項(xiàng)，僅當(dāng)前子菜單項(xiàng)可顯示，其余子菜單隱藏

用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>30秦甜甜_實(shí)訓(xùn)13-2_3_180701802230_18計(jì)算機(jī)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>
					<h3 class="menu-head">學(xué)科</h3>
					<ul class="menu-body">
						<li>語(yǔ)文</li>
						<li>數(shù)學(xué)</li>
						<li>英語(yǔ)</li>
						<li>體育</li>
					</ul>
				</li>
				<li>
					<h3 class="menu-head">水果</h3>
					<ul class="menu-body">
						<li>蘋(píng)果</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>魚(yú)肉</li>
						<li>雞肉</li>
						<li>牛肉</li>
						<li>豬肉</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

運(yùn)行結(jié)果圖：

用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單

以上就是關(guān)于用代碼分析JQuery如何實(shí)現(xiàn)折疊式菜單的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手