jQuery学习：二级菜单

最新推荐文章于 2023-11-11 19:23:59 发布

¡Venceremo

最新推荐文章于 2023-11-11 19:23:59 发布

阅读量342

点赞数

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

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

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

监听加在父元素上

对子元素进行操作动画变换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
		<style>
			#category_items{
				width: 200px;
				background: yellow;
				margin: auto 0;
			}
		</style>
	</head>
	<body>
		<div id="category_items" style="display: block;">
			<!-- 监听部分 -->
			<div class="cate_item">
				<h3>第一级</h3>
				<div class="sub_cate_box" style="display: none;">
					<!-- dom操作部分 -->
					<div>111111111</div>
					<div>111111111</div>
				</div>
			</div>
			<div class="cate_item">
				<h3>第二级</h3>
				<div class="sub_cate_box" style="display: none;">
					<div>222222222</div>
					<div>222222222</div>
				</div>
			</div>
		</div>
		<script>
			hoverSubMenu();

			function hoverSubMenu() {
				$("#category_items>div").hover(
					function() { //鼠标移入
						//	$(this)包装成为jquery对象
						$(this).children(":last").show()

					},
					function() { //鼠标移出
						$(this).children(":last").hide()
					})
			}
		</script>
	</body>
</html>