效果图:
重点:
鼠标进入事件mouseenter 鼠标离开事件mouseleave
下拉动画slideDown /收起动画slideUp
执行下一次操作前都要先通过.stop() 停止动画
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.menu>li{
float: left;
width:200px ;
height: 60px;
background-color: #DAA520;
list-style: none;
text-align: center;
line-height: 60px;
}
.menu>li>ul{
list-style: none;
display: none;
background-color: #FF0000;
}
.menu>li:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="menu">
<li class="current">123
<ul class="show">
<li>123 <span></span></li>
<li>123<span></span></li>
<li>123<span></span></li>
</ul>
</li>
<li>123
<ul>
<li>123<span></span></li>
<li>123<span></span></li>
<li>123<span></span></li>
</ul>
</li>
<li>123
<ul>
<li>123<span></span></li>
<li>123<span></span></li>
<li>123<span></span></li>
</ul>
</li>
</ul>
</div>
</body>
<script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $li=$(".wrap>ul>li")
// 鼠标进入事件mouseenter 鼠标离开事件mouseleave
$li.mouseenter(function () {
// 下拉动画slideDown
// 再执行下一次操作前都要先通过.stop() 停止动画
$(this).children("ul").stop().slideDown();
});
$li.mouseleave(function () {
//收起动画slideUp
$(this).children("ul").stop().slideUp();
});
});
</script>
</html>