需求说明：
使用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>
