效果如下,鼠标经过显示隐藏的二级菜单栏
但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.caidan{
width:500px;
height: 30px;
background-color: red;
padding: 0;
margin: 200px auto;
}
ul{
list-style: none;
}
.caidan>li{
float: left;
width: 25%;
line-height: 30px;
text-align: center;
color:white;
}
.caidan>li:hover{
cursor: pointer;
}
.second{
/* height: 200px; */
display: none;
background-color: aqua;
}
.second li{
text-align: center;
}
</style>
<script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
<script>
$(function(){
$(".caidan>li").mouseenter(function(){
// console.log("1");
$(this).stop();
$(this).children(".second").slideDown(500);
});
$(".caidan>li").mouseleave(function(){
// $(this).siblings().children(".second").slideUp(1000);
$(this).stop();
$(this).children(".second").slideUp(500);
});
});
</script>
</head>
<body>
<ul class="caidan">
<li>一级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>