将鼠标悬停在两个seoconds上时显示下拉菜单
将鼠标悬停在两个seoconds上时显示下拉菜单
提问于 2017-01-20 21:03:36
我使用了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'))
})
})
}在我的编辑后，它不工作时，悬停和我必须点击打开它，我尝试了许多解决方案，但失败了，我需要什么，当鼠标经过两秒，然后打开下拉菜单。
有什么建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-20 21:13:49
我没有读过你的代码，我只能建议你自己去做。您需要的是一个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
});Stack Overflow用户
发布于 2017-01-20 21:11:49
这应该会有帮助：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变量的状态，以确定我们是否仍然悬停在该元素上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41764392
复制相关文章
相似问题
腾讯云开发者
