问题描述
- jq导航二级菜单，但是上下老是晃动。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档
#ulstyle{
margin:0;
padding:0;
list-style-type:none;
width:1100px;
height:45px;
background:#CC3300;
color:#000000;
font-size:18px;
font-weight:bold;
border:#000 solid 1px;
overflow:visible;}
#ulstyle li{
float:left;
margin-left:50px;
line-height:45px;
width:150px;
height:45px;
position:relative;
z-index:98;}
#ulstyle li a{
text-decoration:none;
display:block;
color:#FFFFFF;
width:150px;
height:45px;
background:#0099FF;
text-align:center;}
#download01{
list-style-type:none;
width:148px;
height:200px;margin:0;
padding:0;
border:#000000 solid 1px;
background:#FF6600;
display:none;
position:absolute;
top:46px;
z-index:98px;}
#download01 li{
height:25px;
margin-left:0px;
font-size:12px;
clear:both;
line-height:25px;
width:148px;
text-align:center;
z-index:98px;}
- Home
- Download
- gonxiazaiqu
- xiaozaijdj
- fjjowowowo
- ooororrorrr
</ul> </li> <li><a href="#">technologe</a></li> <li><a href="#">gaoshuxuexi</a></li> <li><a href="#">guanyuwomen</a></li>
$(document).ready(function() {
$('#download').mouseover(function(){
$('#download01').slideDown(500);
})
$('#download').mouseout(function(){$('#download01').slideUp(500);
})
});
//function aa(){
// document.getElementById('download01').style.display='block';
// }
//function bb(){
// document.getElementById('download01').style.display='none';
// }
解决方案
mouseover和mouseout改为mouseenter和mouseleave。
mouseover就算在对象子对象移动也会触发，enter和leave在子对象上不会触发
<ul id="ulstyle">
<li><a href="#">Home</a></li>
<li id="download">
<a href="#">Download</a><ul id="download01">
<li>gonxiazaiqu</li>
<li>xiaozaijdj</li>
<li>fjjowowowo</li>
<li>ooororrorrr</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$('#download').mouseenter(function () { $('#download01').stop(true, true).slideDown(500); }).mouseleave(function () { $('#download01').slideUp(500); })
});
</script>