向下拉菜单添加超时不起作用答案

【问题标题】：Adding timeout to a dropdown menu not working向下拉菜单添加超时不起作用
【发布时间】：2012-06-13 20:14:13
【问题描述】：

我正在开发一个网站，并想修改下拉菜单项的当前代码。这是当前代码：

$(document).ready(function () { 

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

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

});

我尝试更改代码以添加超时，目的是在用户将鼠标从菜单上移开时设置超时，这样菜单不会立即切换上滑效果。我想要的效果是，如果用户将鼠标从菜单上移开 200 毫秒，然后将其移回菜单，则它不会执行任何操作。所以菜单要等待 300-400 毫秒才能切换上滑功能。这是我编写的不起作用的代码。部分原因是因为$('ul', this).slideUp(250); 中的this 无论如何，这是我尝试实现但不起作用的代码：

$(document).ready(function () { 
var timeoutID;
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(250);
        window.clearTimeout(timeoutID);
        timeoutID = window.setTimeout(SlideUp, 350);
    },  
);
function SlideUp() {
    //hide its submenu
    $('ul', this).slideUp(250);         
}
});

让程序等待切换上滑功能的最佳方法是什么？ 任何想法都值得赞赏。谢谢。

【问题讨论】：

jQuery.delay() 可能会有所帮助。

标签： javascript jquery menu slidedown slideup

【解决方案1】：

这就是你想做的。

$(document).ready(function () { 
  var timeout;
  $('#nav li').hover(function () {
    //show its submenu
    clearTimeout(timeout);
    $('ul', this).slideDown(300);
  }, function () {
    //hide its submenu
    var self = this;
    timeout = setTimeout(function(){
      $('ul', self).slideUp(300);         
    }, 300);
  });
});

【讨论】：

我尝试实现代码，但没有成功，但感谢您帮助我更好地理解语法。我刚刚在原始代码中添加了 hoverIntent，它工作正常。
是的，由于某种原因，当我将它放入代码中时它什么也没做。它甚至禁用了下拉菜单，这很奇怪，因为它看起来会起作用。但是更改下拉列表以添加超时是一个很小的细节，可以忽略。

【解决方案2】：

jQuery.Deferred()，在 1.5 版本中引入，是一个可链接的实用程序可以将多个回调注册到回调队列中的对象，调用回调队列，并传递任何成功或失败状态同步或异步函数。

看看this。

【讨论】：

【解决方案3】：

不是您具体问题的答案，但如果可能，我会使用transition-delayfiddle。

【讨论】：