jquery 实现折叠菜单的效果

新藤一郎

于 2019-05-30 16:26:33 发布

阅读量845

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43854764/article/details/90699757

前端专栏收录该内容

16 篇文章

订阅专栏

该博客主要围绕jQuery实现菜单效果展开，借助jQuery的相关功能达成特定菜单效果，属于前端开发领域，能为前端开发者在菜单设计方面提供一定参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>