Question

使用此代码段作为示例，如何在鼠标光标离开下拉菜单区域后自动隐藏下拉列表？

Amazon.com就是一个很好的例子。如果将鼠标移到“按部门购物”上，然后将光标移开，并在约0.5秒内将其恢复，下拉菜单仍然可见。

Bootstrap代码段：https://bootsnipp.com/snipps/user-preferences-in-nav-bar

我想我可以做一个setTimeout但是它会隐藏它，即使我决定在2秒内将光标移回到下拉列表中。也许我可以清除mouseOver上的setTimeout来解决这个问题？

在这种情况下，人们通常会做些什么？

Answer 1

您需要在mouseout事件上附加var x = setTimeout('hideme()',2000)并在mousein回调时取消clearTimeout(x)

Answer 2

另一个建议......

使用函数处理悬停，在内部有元素和事件。因此，您知道何时使用mouseenter以及何时使用mouseleave。您可以使用功能属性来保存计时器，并在需要时将其清除。

http://jsfiddle.net/blackjim/jw7Uz/3/

var handleHover = function(evObj){
    var $this = $(this);

    if(!$this.hasClass('open')){
        return true;
    }

    if(evObj.type === 'mouseleave'){
        //    on mouseleave...
        handleHover.timer = setTimeout(function(){
            $this.removeClass('open');
        },2000);

    } else if(evObj.type === 'mouseenter'){
        //    on mouseenter...
        if(handleHover.timer){    //    find timer and clear it
            clearTimeout(handleHover.timer);
            delete handleHover.timer;
        }
    }
};


$('#myDropDown').hover(handleHover);

Twitter Bootstrap：如何在2秒后自动隐藏下拉菜单？

2 个答案: