为了账号安全,请及时绑定邮箱和手机立即绑定

这样会导致前一个的.sub-menu不会slideUp,咋整

这样会导致前一个的.sub-menu不会slideUp,咋整

慕田峪9158850 2023-04-19 18:14:40
$('.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展开的状态
查看完整描述

2 回答

?
慕娘9325324

TA贡献1783条经验 获得超4个赞

不对;你的代码中的几个地方不合适:
1.obj = $(this).find('.sub-menu'); 这里声明了一个全局变量
2.clearTimeout(t1,t2); 这里不需要清除

我觉得应该这样

$('.menu li').mouseover(function(){                        var obj = $(this).find('.sub-menu');                        setTimeout(function () {obj.slideDown(600)}, 500);
                }).mouseout(function(){                        var obj = $(this).find('.sub-menu');                        setTimeout(function () {obj.slideUp(600)}, 1500);
                });


查看完整回答
反对 回复 2023-04-22
?
小怪兽爱吃肉

TA贡献1852条经验 获得超1个赞

感觉更应该

$('.menu li').mouseover(function(){	clearTimeout(t2);
	obj = $(this).find('.sub-menu');
	t1 = setTimeout(function () {obj.slideDown(600)}, 500);
}).mouseout(function(){	clearTimeout(t1);
	obj = $(this).find('.sub-menu');
	t2 = setTimeout(function () {obj.slideUp(600)}, 1500);
});


查看完整回答
反对 回复 2023-04-22
  • 2 回答
  • 0 关注
  • 102 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号