Question

我使用了DROPDOWNHOVER脚本，我需要制作如果鼠标悬停两秒然后出现菜单这是我编辑前的代码：

var Dropdownhover = function (element, options) {
this.options    = options    
this.$element   = $(element)

var that = this

// Defining if navigation tree or single dropdown
this.dropdowns = this.$element.hasClass('dropdown-toggle') ? this.$element.parent().find('.dropdown-menu').parent('.dropdown') : this.$element.find('.dropdown')

this.dropdowns.each(function(){
    $(this).on('mouseenter.bs.dropdownhover', function(e) {
      that.show($(this).children('a, div'))
    })
})
this.dropdowns.each(function(){
    $(this).on('mouseleave.bs.dropdownhover', function(e) {
      that.hide($(this).children('a, div'))
    })
})
}

编辑后

：

var Dropdownhover = function (element, options) {
this.options    = options    
this.$element   = $(element)

var that = this

// Defining if navigation tree or single dropdown
this.dropdowns = this.$element.hasClass('dropdown-toggle') ? this.$element.parent().find('.dropdown-menu').parent('.dropdown') : this.$element.find('.dropdown')
var timeout;
this.dropdowns.each(function(){
   $(this).on('mouseenter.bs.dropdownhover', function(e) {
         timeout = setTimeout(function () {
             that.show($(this).children('a, div'))
         }, 2000)       
    })
})
this.dropdowns.each(function(){
    $(this).on('mouseleave.bs.dropdownhover', function(e) {
      that.hide($(this).children('a, div'))
    })
})
}

在我编辑后，它在悬停时不起作用，我必须点击打开它我尝试了许多解决方案但失败了，当鼠标悬停两个seonds然后打开下拉菜单时我需要什么。

有什么建议吗？

Answer 1

我没有阅读您的代码，我只能建议一种方法来自己做。你想要的是一个setTimeout函数，并在需要时取消它：

var timeout;
$('.your-Mouse-enter-Menu').mouseenter(function(){
     timeout = setTimeout(function(){
     //Showing The Sub Menu Code
     },2000);
});
$('.your-Mouse-enter-Menu').mouseleave(function(){
    clearTimeout(timeout);  //cancel opening submenu if mouse leave
});

Answer 2

这应该有所帮助：https://jsfiddle.net/4eww3pf3/

JavaScript：

var hovered = false; 
$('.my-select').on('mouseenter',function(){
    hovered = true;

    setTimeout(function(){
        if(hovered){
            // do your stuff here
            $('body').append('2 seconds passed!');
        }
    },2000);

}).on('mouseleave',function(){
    hovered = false;
});

它在做什么？

在开始时定义hovered变量并将其设置为false。当<select>悬停时，变量将设置为true，并在未打开时返回false。当<select>悬停时，我们将超时设置为2秒;一旦2秒过去，我们检查hovered变量的状态，以确定我们是否仍然悬停在该元素上。

鼠标悬停两个seoconds时出现下拉菜单

2 个答案: