JQuery下拉菜单

最新推荐文章于 2023-10-06 22:18:06 发布

weixin_46612232

最新推荐文章于 2023-10-06 22:18:06 发布

阅读量77

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46612232/article/details/112032274

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在JQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，再执行动画

<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.nav{
			list-style:none;
			width:300px;
			height:50px;
			background:#eee;
			margin: 100px auto;
		}
		.nav>li{
			width:100px;
			height:50px;
			line-height:50px;
			text-align:center;
			float:left;
		}
		.sub{
			list-style:none;
			background:#ccc;
			display:none;
		}
	</style>
	<script scr="js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
		/*
			在JQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，再执行动画
		*/
			//监听一级菜单移入
			$(".nav>li").mouseenter(function(){
			//拿到二级菜单
				var $sub = $(this).children('sub');
				//停止正在进行的动画
				$sub.stop();
				//二级菜单展开
				$sub.slideDown(1000);
			})
			//监听一级菜单移出
			$(".nav>li").mouseleave(function(){
			//拿到二级菜单
				var $sub = $(this).children('sub');
				//停止正在进行的动画
				$sub.stop();
				$sub.slideUp(1000);
			})
		})
	</script>
</head>
<body>
<ul class="nav">
	<li>一级菜单
		<ul class="sub">
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单</li>
	<li>一级菜单</li>
</ul>
</body>