首頁猿問這樣會導(dǎo)致前一個的.sub-men...

這樣會導(dǎo)致前一個的.sub-menu不會slideUp，咋整

JavaScript

慕田峪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后導(dǎo)致鼠標(biāo)移動到sub-menu上會自動slideUp，用改為hover解決問題。由于不clearTimeout導(dǎo)致鼠標(biāo)只要經(jīng)過.menu li上方過500ms后仍會執(zhí)行slidedown()這樣容易造成誤操作。lazyboy的答案無法觸發(fā)下方代碼。故綜合了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上，那么會執(zhí)行clearTimeout(t2)，這樣會導(dǎo)致前一個的.sub-menu不會slideUp。上面代碼是我想到的解決方案，實在只能放棄t2了，有更好的方法么？新問題：鼠標(biāo)如果從.sub-menu移開又馬上回來，能不能取消slideup執(zhí)行并恢復(fù)成.sub-menu展開的狀態(tài)

查看完整描述

2 回答

慕娘9325324

TA貢獻(xiàn)1783條經(jīng)驗獲得超4個贊

不對；你的代碼中的幾個地方不合適：
1.obj = $(this).find('.sub-menu'); 這里聲明了一個全局變量
2.clearTimeout(t1,t2); 這里不需要清除

我覺得應(yīng)該這樣

$('.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);
                });

反對回復(fù) 2023-04-22

小怪獸愛吃肉

TA貢獻(xiàn)1852條經(jīng)驗獲得超1個贊

感覺更應(yīng)該

$('.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);
});

反對回復(fù) 2023-04-22