徘徊延迟意外动作

我试图延迟或停止滑动操作菜单，当用户误将菜单关闭，然后再次徘徊。我试图防止用户无意中滑出悬停区域时滑动菜单。我希望用户在一秒钟内将鼠标悬停回来，而不是让菜单向上滑动。徘徊延迟意外动作

我使用了下面的延迟功能，因为这并不妨碍菜单向上滑动。谢谢。

$(document).ready(function() { 
$('#nav li').hover(
    function() { 
     //show its submenu 
     $('ul', this).slideDown(250); 

    }, 
    function() { 
     //hide its submenu 
     $('ul', this).delay(1000).slideUp(500);   
    } 
); 
});

演示：http://jsfiddle.net/D3A5g/

这里有一个建议尼尔森公布。它在jsfiddle上工作，但不在我的页面上。任何人都可以告诉我什么阻止在我的网页上工作？

工作演示：http://jsfiddle.net/xwAdG/6/

下面的代码当我测试它不工作。任何想法，为什么它不工作？

<html> 
<head> 
<style type="text/css"> 
#nav { 
padding: 40px; 
border: solid #999 1px; 
} 
#nav ul { 
margin: 0; 
padding: 0; 
display: none; 
background-color: #CCC; 
} 
#nav ul li { 
margin: 0; 
list-style: none; 
list-style-type: none; 
padding: 5px; 
width: 40px; 
} 
#nav a { 
color: black; 
text-decoration: none; 
padding: 5px; 

} 
#nav a:hover { 
text-decoration: none; 
background-color: yellow; 
} 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script> 
<script> 
var config = {  
over: function() { //onMouseOver callback (REQUIRED) 
    $('ul', this).slideDown(250);//show its submenu 

},  
timeout: 500, // milliseconds delay before onMouseOut (default 0) 
out: function() { // function = onMouseOut callback (REQUIRED) 
    $('ul', this).slideUp(500); //hide its submenu   
}  
}; 
$('#nav li').hoverIntent(config); 
</script> 
</head> 

<body> 
<ul id="nav"> 
<li ><a href="#">Main</a> 
<ul> 
<li><a href="#">AAAAA</a></li> 
<li><a href="#">BBBBB</a></li> 
<li><a href="#">CCCCC</a></li> 
<li><a href="#">DDDDD</a></li> 
<li><a href="#">FFFFF</a></li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

更新：我发现我需要用$（文件）。就绪包的代码。通过这样做，它在html页面中工作。

<script> 
$(document).ready(function() { 
var config = {  
over: function() { //onMouseOver callback (REQUIRED) 
$('ul', this).slideDown(250);//show its submenu 

},  
timeout: 500, // milliseconds delay before onMouseOut (default 0) 
out: function() { // function = onMouseOut callback (REQUIRED) 
$('ul', this).slideUp(500); //hide its submenu   
}  
}; 
$('#nav li').hoverIntent(config); 
}); 
</script>

来源

2012-11-24 Phillip

我建议你hoverIntent plugin对于这一点，我已经用它在某些项目上，也很高兴至今。

您发布的代码将通过这样的插件可以使用：

var config = {  
    over: function() { //onMouseOver callback (REQUIRED) 
     $('ul', '#nav li').slideDown(250);//show its submenu 

    },  
    timeout: 0, // milliseconds delay before onMouseOut (default 0) 
    out: function() { // function = onMouseOut callback (REQUIRED) 
     $('ul', '#nav li').slideUp(500); //hide its submenu   
    }  
}; 
$('#nav li').hoverIntent(config);

来源

2012-11-24 20:22:39 Nelson

感谢您的帮助。我试过使用它，但不太清楚如何将上面的代码与hoverintent.js集成。 :-( – Phillip

我已经更新了我的回答，并附上适用于该插件的示例代码，请查看。 – Nelson

我在jsfiddle上有您的代码 - http://jsfiddle.net/xwAdG/3/。感谢您的帮助。似乎在jsfiddle上工作，但它似乎并没有在页面上嵌入时滑动。当页面上有其他ul和li时是否需要修改？ – Phillip

徘徊延迟意外动作

回答

相关问题