上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style: none; } .box { width: 960px; /*height: 60px;*/ overflow: hidden; margin: 0 auto; /*border: 1px solid green;*/ } .box ul li { float: left; /* 160px;*/ /*height: 60px;*/ line-height: 60px; text-align: center; } .box ul li a { text-decoration: none; display: block; width: 40px; height: 60px; color: #000; padding: 0 60px; background-color: yellow; } .box .show { width: 100%; height: 200px; position: absolute; /*background-color: red;*/ top: 60px; left: 0; border-top: 1px solid #666; border-bottom: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #666; display: none; box-shadow: 0 0 5px #777; } .box .show.active { display: block; } </style> </head> <body> <div class="box"> <ul> <li> <a href=" ">felix手机</a> <div class="show"> <div class="container"> 张三 </div> </div> </li> <li> <a href="#">felix手机</a> <div class="show"> <div class="container"> 李四 </div> </div> </li> <li> <a href="#">felix手机</a> <div class="show"> <div class="container"> 王五 </div> </div> </li> <li> <a href="#">felix手机</a> <div class="show"> <div class="container"> 赵六 </div> </div> </li> <li> <a href="#">felix手机</a> <div class="show"> <div class="container"> 武七 </div> </div> </li> <li> <a href="#">felix手机</a> <div class="show"> <div class="container"> 哈哈哈哈 </div> </div> </li> </div> <script type="text/javascript" src='../jquery-3.3.1.min.js'></script> <script type="text/javascript"> $(function () { // 控制当鼠标第一次呼入的动画效果 let animated = false; $('.box>ul>li>a').mouseenter(function (ev) { // 下面代码时鼠标第一次滑入a标签的动画效果 if (!animated) { animated = true; let jQa = $(this); jQa.css('color', '#F52809'); // next()表示当前标签的紧挨着的兄弟标签 $(this).next("div").stop().slideDown(600); } else { let jQa = $(this); // 修改a标签的样式 jQa.css('color', '#F52809').parent('li').siblings('li').children('a').css('color', 'black'); // 切换下面显示区域的内容 jQa.next('div').stop().show().parents('li').siblings('li').children('.show').stop().hide(); } }); // 鼠标进入到下方区域，保持不变 $('.show').mouseenter(function (ev) { $(this).stop().show(); }); // 鼠标离开下方区域 $('.show').mouseleave(function (ev) { $(this).stop().slideUp(300); animated = false }); // 鼠标离开导航栏列表 $('.box').mouseleave(function (ev) { console.log($(ev.target)); $(ev.target).next("div").stop().slideUp(300); animated = false; }); }) </script> </body> </html>