jquery 实现折叠菜单的效果

最新推荐文章于 2022-06-11 07:58:06 发布

新藤一郎

最新推荐文章于 2022-06-11 07:58:06 发布

阅读量806

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43854764/article/details/90699757

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".container>li").mouseenter(function(){
				/*children 是找到子元素*/
					var $as=$(this).children(".trim")
					/*停止滑动*/
					$as.stop();
					/**动画/
					$as.slideDown(1000);
					
					
				})
				$(".container>li").mouseleave(function(){
					var $asi=$(this).children(".trim");
					$asi.stop();
					$asi.slideToggle(1000);
					
				})
			})
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}

			.container {
				width: 300px;
				height: 50px;
				background-color: pink;
			}

			.container li {
				width: 100px;
				float: left;
				text-align: center;
				line-height: 50px;
				height: 50;
			}
			.trim {
				background-color: red;
				height: 250px;
				display:none;
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="container">
				<li>一级菜单
					 <ul class="trim">
						<li>德玛龇牙</li>
						<li>德玛龇牙</li>
						<li>德玛龇牙</li>
						<li>德玛龇牙</li>
						<li>德玛龇牙</li>
					</ul> 
				</li>

				<li>一级菜单</li>
				<li>一级菜单</li>
			</ul>
		</div>
	</body>
</html>

新藤一郎

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 实现折叠菜单的效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.4.1.min.js"></script> <script type="text/javasc...
复制链接

扫一扫

专栏目录