Question

我对此并不十分精通，但我有一个导航项目，在悬停时，带有搜索表单的div向下滑动。目前，当您将鼠标悬停，然后鼠标移开时，div将保持打开状态，直到您单击关闭按钮。

我正在尝试这样做，以便当你鼠标移开div几秒后滑动备份，除非用户仍在div或nav链接上（即，他们填写搜索表单）。

这是我到目前为止所拥有的：

$("#services_link").mouseover(function() {
        $("#services_link").css('background-position','left -73px');
        $("#vendors_dropdown").slideDown(function() {
            setTimeout(HideMe, 4000);
        });
    });

    function HideMe() {
        $("#services_link").css('background-position','left 0');
        $("#vendors_dropdown").slideUp();
    }

当我在链接悬停时向下滑动div并在4秒后向上滑动（无论鼠标光标在哪里），这都是我的变量。所以如果鼠标光标在链接或div上，我只需要div保持打开状态。

我已经看了3或4个其他类似的问题（和答案），但没有一个真正做到这一点。 setTimeout（和clearTimeout）对我来说有点新鲜，所以请原谅noob问题。：）

Answer 1

将mouseenter和mouseleave绑定。您需要在mouseleave上执行超时，但在/当鼠标中心再次发生时重置它。

尝试查看所选答案here，了解如何做我正在谈论的内容。

这样的事情：

var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
    window.clearTimeout(timeout);
    $("#services_link").css('background-position','left -73px');
    $("#vendors_dropdown").slideDown();
}).mouseleave(function(){
    timeout = window.setTimeout(HideMe, 4000);
});

function HideMe() {
    $("#services_link").css('background-position','left 0');
    $("#vendors_dropdown").slideUp();
}

jQuery / JS setTimeout / clearTimeout

1 个答案: