代码如下:
<!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; /*width: 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=" ">小米手机</a > <div class="show"> <div class="container"> 张三 </div> </div> </li> <li> <a href="#">小米手机</a > <div class="show"> <div class="container"> 李四 </div> </div> </li> <li> <a href="#">小米手机</a > <div class="show"> <div class="container"> 王五 </div> </div> </li> <li> <a href="#">小米手机</a > <div class="show"> <div class="container"> 赵六 </div> </div> </li> <li> <a href="#">小米手机</a > <div class="show"> <div class="container"> 武七 </div> </div> </li> <li> <a href="#">小米手机</a > <div class="show"> <div class="container"> 哈哈哈哈 </div> </div> </li> </div> <script type="text/javascript" src='jquery-3.3.1.js'></script> <script type="text/javascript"> $(function(){ var animated = false; $('.box>ul>li>a').mouseover(function(ev){ // ev.stopPropagation(); if(!animated){ animated = true; var jQa = $(this); jQa.css('color','#F52809') $(ev.target).next("div").stop().slideDown(600,function(){ }); }else{ var jQa = $(this); 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(); }) $('.box').mouseout(function(ev){ console.log($(ev.target)); $(ev.target).next("div").stop().slideUp(300); }); }) </script> </body> </html>