jquery 实现折叠菜单效果

最新推荐文章于 2022-07-18 19:17:52 发布

新藤一郎

最新推荐文章于 2022-07-18 19:17:52 发布

阅读量2.1k

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("li").click(function() {
				/*获得父元素中的子元素*/
					var $menu = $(this).children(".menu");
					/*动画*/
					$menu.slideDown(1000);
					/*筛选同辈元素的集合意思就是说除了选中的元素别的元素*/
					var $ine = $(this).siblings().children(".menu");
					$ine.slideUp(1000);

				})

			})
		</script>
		<style type="text/css">
			li {
				list-style: none;
			}

			.container {
				width: 200px;
				height: 500px;
				border: 1px solid black;
				margin: 50px auto;
				border-radius: 10px;
			}

			.container li {
				color: pink;
				border-bottom: 1px solid black;
				padding: 20px 20px;
			}

			.container span {
				float: right;
			}

			.menu {
				display: none;
			}

			.menu li {}
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li>一级菜单<span>></span>
					<ul class="menu">
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单<span>></span>
					<ul class="menu">
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单<span>></span>
					<ul class="menu">
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				<li>一级菜单<span>></span>
					<ul class="menu">
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
				</li>
				<li>一级菜单<span>></span>
					<ul class="menu">
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
						<li>二级菜单</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

新藤一郎

关注

0
点赞
踩
1

收藏

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

<html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.4.1.min.js"></script> <script type="text/javascript"> $(functio...
复制链接

扫一扫

专栏目录