我有一个菜单。在此菜单中,我有一些隐藏的子菜单,因此我在悬停操作后显示它。我对子菜单的显示也有一些延迟效果。现在我想在隐藏它时添加相同的效果。但这不起作用。另外,如何在悬停/鼠标进入下一个菜单元素时添加一些延迟?
$('.main_menu ul li').on({
mouseenter: function(){
var self = this,
time = 200;
$(self).data('timer', setTimeout(function(){
$(self).children('.sub_menu_main').addClass('opened');
}, time));
},
mouseleave: function(){
var self = this,
time = 200;
clearTimeout($(self).data('timer'));
setTimeout(function() {
$(self).children('.sub_menu_main').removeClass('opened');
}, time);
}
});
最佳答案
我很好地解决了这个问题,所以:
var timer;
$('.main_menu ul li').on({
mouseenter: function(){
var self = this;
clearTimeout(timer);
timer = setTimeout(function(){
$(self).children('.sub_menu_main').addClass('opened');
}, 100)
},
mouseleave: function(){
var self = this;
setTimeout(function(){
if (!$(self).children('.sub_menu_main').is(":hover")){
$(self).children('.sub_menu_main').removeClass('opened');
}
}, 100);
}
});
关于javascript - 如何使用 jQuery 延迟 mouseleave 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14356986/