jQuery学习：显示隐藏一级菜单

最新推荐文章于 2023-06-20 20:22:29 发布

¡Venceremo

最新推荐文章于 2023-06-20 20:22:29 发布

阅读量302

点赞数

分类专栏： jquery 文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127883079

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
		<style>
			#app_id {
				width: 100px;
				background-color: aqua;
				height: 35px;
				text-align: center;
				line-height: 35px;
			}

			.stylediv {
				background-color: yellow;
				border-top: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="app_id" class="app_jd" name="show_hide">
				abc
				<div id="app_id_items" style="display: none;">
					<div>dldl</div>
					<div>ddd</div>
					<div>dldl</div>
					<div>ddd</div>
					<div>dldl</div>
					<div>ddd</div>
				</div>
			</li>
		</ul>

		<script>
			showhide();

			function showhide() {
				//鼠标移入显示，移出隐藏
				$('[name=show_hide]').hover(function() { //鼠标移入 显示 this是DOM对象
					var id = this.id + "_items";
					$("#" + id).children().addClass('stylediv')
					$("#" + id).stop().slideDown(1000)

				}, function() { //鼠标移出 隐藏
					var id = this.id + "_items";
					$("#" + id).children().addClass('stylediv')
					$("#" + id).stop().slideUp(1000)
				})
			}
		</script>
	</body>
</html>