查看本章节
查看作业目录
需求说明：
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏
实现思路：
新建 HTML 页面，在页面上使用无序列表显示一级菜单在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色为一级菜单的鼠标移入、移出事件绑定方法，实现二级菜单的滑入滑出效果当鼠标悬浮在二级菜单上时，菜单的背景色变为红色，字体颜色变为白色实现代码：
核心代码：
<script type="text/javascript">$(function(){$("#menu>li:has(ul)").hover(function(){$(this).find('ul').slideDown(500);},function(){$(this).find('ul').slideUp(500);})})</script>
完整代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;}ul{list-style: none;}a{text-decoration: none;color: #000;}#wrap{position: relative;top: 0px;width: 876px;height: 34px;line-height: 34px;margin: 0 auto;}#menu li{float: left;display: block;width: 92px;height: 37px;line-height: 37px;text-align: center;margin-right: 2px;}#menu li a{display: block;background: #edebec;font-size: 14px;color: #333;width: 92px;height: 37px;line-height: 37px;}#menu li a:hover{background: red;color: white;}#menu li ul{position: absolute;top: 37;width: 90px;display: none;border: 1px solid #ce070e;border-top: none;background: #fff;}#menu li ul li{float: left;width: 90px;height: 37px;line-height: 37px;}#menu li ul ll a:link{width: 90px;height: 37px;line-height: 37px;}#menu li ul li a:hover{color: white;text-decoration: none;}</style><script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#menu>li:has(ul)").hover(function(){$(this).find('ul').slideDown(500);},function(){$(this).find('ul').slideUp(500);})})</script></head><body><div id="wrap"><ul id="menu"><li><a href="#">网站首页</a></li><li><a href="#">最新动态页</a><ul><li><a href="#">源码爱好者</a></li><li><a href="#">编程导航</a></li><li><a href="#">网页特效</a></li></ul></li><li><a href="#">产品预订</a></li><li><a href="#">帮助查询</a><ul><li><a href="#">时速快递</a></li><li><a href="#">太空一号</a></li><li><a href="#">蜘蛛侠前传</a></li><li><a href="#">未来战士</a></li><li><a href="#">蟒蛇之灾</a></li></ul></li><li><a href="#">会员俱乐部</a></li><li><a href="#">凯撤论坛</a></li></ul></div></body></html>
如果觉得《在 jQuery 中使用滑入滑出动画效果 实现二级下拉导航菜单的显示与隐藏效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
