javascript - 鼠标悬停两秒出现下拉菜单

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'))
    })
})
}

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

有什么建议吗？

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
});