Question

我有一个由WordPress生成的菜单。在子菜单上创建一个元素旁边的ul.sub-menu元素。我想使用slideToggle动画（我最终会使用hoverFlow插件，但什么时候会表现得如此）。

顺序应该是：[a.mouseenter] [show menu]，[a.mouseleave] [但不能超过ul.submenu] [隐藏菜单]，[ul.sub-menu.mouseleave] [隐藏菜单] < / p>

问题是当鼠标超过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()
})

无济于事？

Answer 2

$('.menu-item a').hover(function() {
    $(this).next('ul.sub-menu').show();
},
function(e) {
    $(this).next('ul.sub-menu:visible').not($(this).siblings()).hide();
});
$('ul.sub-menu').mouseleave(function(e) {
    $(this).hide();
});

如何阻止元素重叠其他元素而不是其子元素的传播

2 个答案: