Question

var toogleDelay = 500;
var closeTimeout = null;

$(">ul>li", $nav).hover(function () {
    var $this = $(this);
    if(closeTimeout) {
        clearTimeout(closeTimeout);
    }
    var openMenuCallback = function() {
        $this.addClass("hover");
    };
    window.setTimeout(openMenuCallback, toogleDelay);
}, function () {
    var $this = $(this);
    var closeMenuCallback = function() {
        $this.removeClass("hover");
    };
    closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
});

我使用此代码段来打开和关闭多点下拉菜单，我希望菜单以0.5秒的延迟淡入淡出。我还在jquery悬停函数的mouseover部分添加了一个cleartimeout，因此如果有人（意外地）离开menuarea并在0.5s内再次输入菜单，菜单就不会关闭。这一切都运行正常，但我现在遇到了问题，因为只有一个下拉列表，即closeTimeout让第一个下拉列表被清除，如果我将鼠标从第一个下拉列表直接移动到第二个下拉列表，我现在有了两个下拉元素都打开了。我该如何重写代码，以便每个下拉列表都有自己的closeTimeout，同时我仍然能够清除悬停函数鼠标悬停部分的超时。

THX 子

Answer 1

您可以将计时器的ID存储在元素的data中。像

这样的东西

var $this = $(this);
var closeMenuCallback = function() {
    $this.removeClass("hover");
    $this.removeData("timerid");
};
var closeTimeout = window.setTimeout(closeMenuCallback, toogleDelay);
$this.data("timerid", closeTimeout);

然后用

检查

var $this = $(this);
var closeTimeout = $this.data("timerid");
if(closeTimeout) {
    clearTimeout(closeTimeout);
    $this.removeData("timerid");
}

Answer 2

我知道这不是问题的一部分，但我喜欢CSS方法。

http://webdesignerwall.com/tutorials/css3-dropdown-menu

有很多例子。有些多层次没有。

JavaScript setTimeout范围问题

2 个答案: