使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

查看本章节

查看作业目录

需求说明：

使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

实现思路：

  1. 在页面中添加<ul> 标签，用来显示无序列表。在<ul> 标签下添加两个<li> 标签，用来显示列表内容
  2. 在<li> 标签下添加两个<div> 标签，第一个显示一级列表的内容，第二个显示二级列表的内容
  3. 第二个<div> 标签默认为隐藏状态，点击列表的项，切换二级列表的显示或隐藏状态

实现代码：

核心代码：

<script type="text/javascript">
	$(function(){
		$(".t").click(function(){
			var children = $(this).siblings(".txt")
			// children.toggle();
			if(children.is(":hidden")){
				children.show();
			}else{
				children.hide();
			}
		})
	})
</script>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				font-size: 14px;
			}
			ul{
				list-style: none outside;
			}
			a{
				text-decoration: none;
				color: #696969;
			}
			a:hover{
				text-decoration: none;
				color: #ff6637;
			}
			.left_nav{
				border: 1px solid #e6e6e6;
				overflow: hidden;
				margin: 30px;
				width: 190px;
			}
			.left_nav li{
				border-top: 1px dashed #e7e7e7;
			}
			.left_nav li .t{
				height: 50px;
				line-height: 50px;
				padding: 0 0 0 18px;
				position: relative;
			}
			.left_nav li .txt{
				padding: 0 0 0 18px;
				display: none;
				border-top: 1px dashed #e7e7e7;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".t").click(function(){
					var children = $(this).siblings(".txt")
					// children.toggle();
					if(children.is(":hidden")){
						children.show();
					}else{
						children.hide();
					}
				})
			})
		</script>
	</head>
	<body>
		<div class="left_nav">
			<ul>
				<li>
					<div class="t"><a href="#">图书畅享榜</a></div>
					<div class="txt">
						<p><a href="#">我喜欢生命本来的样子</a></p>
						<p><a href="#">雪落香杉树</a></p>
					</div>
				</li>
				<li>
					<div class="t"><a href="#">新书畅享榜</a></div>
					<div class="txt">
						<p><a href="#">余生很长，何必慌张</a></p>
						<p><a href="#">你那么懂事，一定很辛苦吧</a></p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

 

posted @ 2020-11-16 10:31  明金同学  阅读(64)  评论(0)  编辑  收藏  举报