知识点
stop() ：停止所有在指定元素上正在运行的动画。slideToggle()：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04-jQuery展开&收起动画案例-下拉菜单-界面搭建</title><style>* {padding: 0;margin: 0;list-style: none;}.firstNav {width: 600px;height: 44px;margin: 100px auto;border: 1px solid #cccccc;cursor: pointer;}.firstNav>li {width: 100px;float: left;text-align: center;}.firstNav>li>span {display: inline-block;width: 100%;height: 44px;line-height: 44px;}.secondNav {border: 1px solid #cccccc;border-top: none;}.secondNav>li {margin-top: 1px;}.secondNav {display: none;}.current .secondNav {display: block;}</style></head><body><ul class="firstNav"><li class="current"><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li></ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">$(function () {// 1. 先让第一个二级菜单隐藏$('.firstNav>li.current .secondNav').css('display', 'none');// 2. 监听鼠标进入/* $('.firstNav>li').hover(function () {$(this).children('.secondNav').slideDown(200);}, function () {$(this).children('.secondNav').slideUp(200);})*/$('.firstNav>li').hover(function () {$(this).children('.secondNav').stop().slideToggle(200);});});</script></body></html>
