需求说明：
使用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>
<meta charset="utf-8">
<title></title>
<style type="text/css">
margin: 0px;
padding: 0px;
body{
font-size: 14px;
list-style: none outside;
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>
<div class="left_nav">
<div class="t"><a href="#">图书畅享榜</a></div>
<div class="txt">
<p><a href="#">我喜欢生命本来的样子</a></p>
<p><a href="#">雪落香杉树</a></p>
<div class="t"><a href="#">新书畅享榜</a></div>
<div class="txt">
<p><a href="#">余生很长，何必慌张</a></p>
<p><a href="#">你那么懂事，一定很辛苦吧</a></p>
</body>
</html>
