$('.menu li').mouseover(function(){ obj = $(this).find('.sub-menu'); t1 = setTimeout(function () {obj.slideDown(600)}, 500); }).mouseout(function(){ t2 = setTimeout(function () {obj.slideUp(600)}, 1500); clearTimeout(t1,t2); });
最终我这么写的:
$('.menu li').hover(function(){ var obj = $(this).find('.sub-menu'); t1 = setTimeout(function () {obj.slideDown(600)}, 500); clearTimeout(t2); },function(){ var obj = $(this).find('.sub-menu'); t2 = setTimeout(function () {obj.slideUp(600)}, 1500); clearTimeout(t1); });
由于使用了mouseover和mouseout后导致鼠标移动到sub-menu上会自动slideUp,用改为hover解决问题。
由于不clearTimeout导致鼠标只要经过.menu li上方过500ms后仍会执行slidedown()这样容易造成误操作。
lazyboy的答案无法触发下方代码。故综合了Frank和lazyboy的答案。
第三次修改
$('.menu li').hover(function(){ var obj = $(this).find('.sub-menu'); t1 = setTimeout(function () {obj.slideDown(400)}, 500); },function(){ var obj = $(this).find('.sub-menu'); obj.slideUp(1000); clearTimeout(t1); });
移除了t2的原因是如果从一个.menu li上展开了.sub-menu并又移动到了另外一个.menu li上,那么会执行clearTimeout(t2),这样会导致前一个的.sub-menu不会slideUp。上面代码是我想到的解决方案,实在只能放弃t2了,有更好的方法么?
新问题:
鼠标如果从.sub-menu移开又马上回来,能不能取消slideup执行并恢复成.sub-menu展开的状态
慕娘9325324
小怪兽爱吃肉
相关分类