javascript - 如何停止元素与其他元素重叠但不与它的子元素重叠的传播

Question

我有一个由 WordPress 生成的菜单。在子菜单上，在 a 元素旁边创建 ul.sub-menu 元素。我想为其使用slideToggle 动画(我最终将使用hoverFlow 插件，但什么时候会表现得像它应该的那样)。

顺序应该是:[a.mouseenter][显示菜单]，[a.mouseleave][但不要超过ul.submenu][隐藏菜单]，[ul.sub-menu.mouseleave][隐藏菜单]

问题是当鼠标悬停在 ul.submenu 上时会触发 a.mouseleave。

我唯一拥有的是 ul 元素与元素重叠一点，它具有绝对位置。

我无法使用 stopPropagation，因为 ul.sub-menu 不是元素的子元素。

目前我使用的代码

jQuery(function($) {

// will completely cover the a hovered element 
$('#access .sub-menu').append('<div style="
position: absolute;
top: -105px;
right: -2px;
height: 106px;
width: 92px;
background-image: url('images/transp.gif');
"></div>');

$('#access a').hover(function(){
    $(this).next('.sub-menu').hide().slideToggle();
},function(){
    $(this).next('.sub-menu').hide();
});

$('#access .sub-menu').hover(function(){
    $(this).show();
},function(){
   $(this).slideToggle();
}); 

});

html:

<ul>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198">
<a href="/?page_id=194">Shop Online</a>
<ul class="sub-menu">
    <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="/?page_id=230">Products</a></li>
    <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a href="/?page_id=263">Procedures</a></li>
    <li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-284"><a href="/?page_id=279">Gift Cards</a></li>
</ul>
</li>
</ul>

Answer 1

$(selector).hover(function(e){
 e.stopPropagation()
})

没有帮助吗？