Javascript 当鼠标悬停过快时,如何避免子菜单混合?
我有以下HTML代码:Javascript 当鼠标悬停过快时,如何避免子菜单混合?,javascript,jquery,html,Javascript,Jquery,Html,我有以下HTML代码: <ul class="navigation-links"> <li class="link-item"> <img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" /> <div style="displa
<ul class="navigation-links">
<li class="link-item">
<img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" />
<div style="display: none" class="sub-menu">
<div class="sub-col">
<img src="images/new-menu/home.png" width="46" height="14" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/home.png" width="46" height="14" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/sataer.png" width="124" height="17" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item">
<img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" />
<div style="display:none" class="sub-menu index-menu-col2">
<div class="sub-col">
<img src="images/new-menu/decor.png" width="53" height="15" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/acc.png" width="94" height="15" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/out-decor.png" width="120" height="17" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item">
<img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" />
<div style="display: none" class="sub-menu index-menu-col3">
<div class="sub-col">
<img src="images/new-menu/lighting.png" width="35" height="16" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/electric.png" width="106" height="19" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li>
</ul>
}))
此菜单工作正常,但当在菜单栏上悬停过快时,每个菜单都会快速出现和消失,看起来非常难看
我认为解决方案是停止向下滑动事件,直到所有向上滑动事件停止,但我不知道如何做
如果有其他解决方案,我准备尝试一下
我修改了你的代码。试试这个:
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").stop(true,false).slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
$(this).children(".sub-menu").stop(true,false).slideUp("fast");
});
});
看一看。它有一些逻辑来确保你的悬停看起来是有意的,比如在物品上方减速等等
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").stop(true,false).slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
$(this).children(".sub-menu").stop(true,false).slideUp("fast");
});
});