jquery hover和setTimeout / clearTimeOut

我正在尝试用子菜单做菜单。 这是我想要做的。

在hover链接（#mylink）时，我想在它下面显示一个div（让我们称之为“#submenu”）。 在鼠标离开此链接时，想要在5秒后执行一个function。

在这个5秒的间隔中，如果我将我的div（#submenu）hover，我想要clearTimeout。 所以这个div在5秒后不会消失。

这是我的代码：

$(document).ready(function() { $("#mylink").hover( function () { $('#submenu').show(); }, function() { var timer = setTimeout(function(){$('#submenu').hide();}, 5000); } ); $("#submenu").hover( function () { clearTimeout(timer); }, function() { $('#submenu').show(); } ); } 

Answer 1

SLaks有正确的答案，但要详细说明，你可以将var timer放在函数处理程序之外。 请注意，此示例不会使timer成为全局变量 – 它只是扩大其范围，以便所有处理程序都可以使用它。

 $(document).ready(function(){ var timer; $("#mylink").hover( function(){ $('#submenu').show(); }, function(){ timer = setTimeout(function(){$('#submenu').hide();}, 5000); } ); $("#submenu").hover( function(){ clearTimeout(timer); }, function(){ $('#submenu').show(); } ); } 

Answer 2

var timer是一个局部变量。
它不存在于该处理程序之外。

你需要把它变成一个全局变量。

Answer 3

我就是这样做的

 var timer $("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()}) $("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);}) 

Answer 4

如果你将#submenu放在#mylink中，你就不需要#submenu的第二个事件处理程序，你会有这样的事情：

 var timer; $(document).ready(function() { $('#mylink').hover(function() { clearTimeout(timer); $('#submenu').show(); },function() { timer = setTimeout(function(){$('#submenu').hide();},5000); }); } 

顺便说一句，你不需要jQuery。 在普通的js中，编码不会太长。