溫馨提示×

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

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

jQuery怎么實(shí)習(xí)菜單功能

發(fā)布時(shí)間：2021-08-10 14:36:37 來(lái)源：億速云 閱讀：108 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要講解了“jQuery怎么實(shí)習(xí)菜單功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“jQuery怎么實(shí)習(xí)菜單功能”吧！

一、垂直菜單的實(shí)現(xiàn)  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="app.css" rel="stylesheet"/>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="app.js"></script>
	</head>
	<body>
		<ul>
			<li class="main">
				<a href="#">菜單1</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜單2</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜單3</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>
ul,li{
	list-style: none;
}

ul{
	padding: 0;
	margin: 0;
}

.main{
	background-color: #666666;
	background-repeat: repeat-x;
	width: 100px;
}

li{
	background-color: #eeeeee;
}

a{
	text-decoration: none;
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.main a{
	color: white;
}

.main li a{
	color: black;
}

.main ul{
	display: none;
}
$(document).ready(function(){
	$(".main>a").click(function(){
		var ulNode = $(this).next("ul");
		ulNode.toggle("normal");
	});
});

二、水平菜單的實(shí)現(xiàn)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="app.css" rel="stylesheet"/>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="app.js"></script>
	</head>
	<body>
		<ul>
			<li class="main">
				<a href="#">菜單1</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜單2</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜單3</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
		</ul>
		<br />
		<br />
		<br />
		<br />
		<br />
		<ul>
			<li class="hmain">
				<a href="#">菜單1</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜單2</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜單3</a>
				<ul>
					<li><a href="#">子菜單1</a></li>
					<li><a href="#">子菜單2</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>
ul,li{
	list-style: none;
}

ul{
	padding: 0;
	margin: 0;
}

.main,.hmain{
	background-color: #666666;
	background-repeat: repeat-x;
	width: 100px;
}

li{
	background-color: #eeeeee;
}

a{
	text-decoration: none;
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.main a,.hmain a{
	color: white;
}

.main li a,.hmain li a{
	color: black;
}

.main ul,.hmain ul{
	display: none;
}

.hmain{
	float: left;
	margin-right: 1px;
}

.main{
	margin-top: 1px;
}
$(document).ready(function(){
	$(".main>a").click(function(){
		var ulNode = $(this).next("ul");
		ulNode.toggle("normal");
	});
	
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
	},function(){
		$(this).children("ul").slideUp();
	});
});

感謝各位的閱讀，以上就是“jQuery怎么實(shí)習(xí)菜單功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)jQuery怎么實(shí)習(xí)菜單功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向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
助
手