slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
例子：一个简单的下拉菜单效果---->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .left{ width: 200px; text-align: center; font-size: 20px; font-family: 宋体; padding-top: 10px; padding-bottom: 10px; } .li1{ margin: 10px; } .li2{ padding-top: 5px; padding-bottom: 5px; } ul{ list-style: none; cursor: pointer; } h4{ background-color: #6495ED; } .ul2{ background-color: #FFF8DC; } </style> </head> <body> <div class="left"> <ul class="ul1"> <li class="li1"> <h4 id="i1">人员管理</h4> <ul class="ul2" id="i2"> <li class="li2">测试人员</li> <li class="li2">开发人员</li> <li class="li2">运维人员</li> </ul> </li> </ul> </div> <script> $("#i1").click(function(){ $("#i2").slideToggle() }) </script> </body> </html>
原文：https://www.cnblogs.com/zhangyh-blog/p/14759121.html