查看本章节
查看作业目录
需求说明：
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
实现思路：
- 在页面中添加<ul> 标签，用来显示无序列表。在<ul> 标签下添加两个<li> 标签，用来显示列表内容
- 在<li> 标签下添加两个<div> 标签，第一个显示一级列表的内容，第二个显示二级列表的内容
- 第二个<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>