91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery怎么實習菜單功能

發布時間:2021-08-10 14:36:37 來源:億速云 閱讀:109 作者:chen 欄目:web開發

這篇文章主要講解了“jQuery怎么實習菜單功能”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“jQuery怎么實習菜單功能”吧!

一、垂直菜單的實現 

<!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");
	});
});

二、水平菜單的實現

<!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怎么實習菜單功能”的內容了,經過本文的學習后,相信大家對jQuery怎么實習菜單功能這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

灵石县| 富蕴县| 安多县| 洛浦县| 开原市| 澄迈县| 石家庄市| 大庆市| 枣强县| 西盟| 雅江县| 南宫市| 金川县| 察隅县| 临海市| 交城县| 噶尔县| 龙口市| 专栏| 漠河县| 巴塘县| 石楼县| 南江县| 藁城市| 沂南县| 壤塘县| 乌兰县| 娱乐| 博湖县| 宁波市| 阳谷县| 东兰县| 卢氏县| 吉首市| 化州市| 辰溪县| 宿州市| 浮梁县| 秦安县| 古丈县| 大石桥市|