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

【问题标题】：Twitter Bootstrap: How to automatically hide dropdown menu after 2 seconds?Twitter Bootstrap：如何在 2 秒后自动隐藏下拉菜单？
【发布时间】：2013-06-27 08:49:06
【问题描述】：

以这个sn-p为例，如何让鼠标离开下拉菜单区域后自动隐藏下拉菜单？

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

引导片段：https://bootsnipp.com/snipps/user-preferences-in-nav-bar

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

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

【问题讨论】：

标签： css twitter-bootstrap drop-down-menu

【解决方案1】：

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

【讨论】：

【解决方案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);

【讨论】：

这在 Firefox 中完美运行，但在 chrome 中无法运行！有什么想法吗？