Question

我需要我的子菜单div才能在li项目和子菜单本身都没有徘徊时消失。

CSS解决方案在这里不起作用，因为我需要使用第一个子悬停，子菜单div不是子元素。

我搜索了论坛，但是当子菜单不是li项目的子项时，无法找到解决方案。

HTML：

<ul id="top-menu"> 
<li>item 1</li>
<li>item 2</li>
<li>item3</li>
</ul>

<!-- somewhere else in DOM (not directly after or child of menu) -->

<div id="#menu1_expansion">
sub menu1 content
</div>

jQuery的：

        $(document).ready(function () {
    $('#top-menu li:nth-child(1)').hover(
    function()
    { 
        $('#menu1_expansion').stop();

        if ($('#menu1_expansion:hidden'))
        { 
            $('#menu1_expansion').show();
        }

    }
);
$('#menu1_expansion').mouseleave( function(){ $('#menu1_expansion').hide(); });
});

CSS：

#menu1_expansion {display:none; position:absolute;}

目前这会让子菜单显示在li项目悬停上，子菜单会在mouseleave时消失，但是当它和li项目都是mouseleave时我需要隐藏子菜单 - 有人可以建议怎么做吗？感谢。

Answer 1

如果你想显示＃menu1_expansion一次并让它保持可见：尝试mouseover（）而不是悬停。

悬停功能仅在您悬停对象时触发，并且在您未指向该元素时未触发。

Answer 2

好的，我找到了一种方法让它运行起来，代码如下，如果它可以帮助其他人：

                $(document).ready(function () {
var count = 0;
$('#top-menu li:nth-child(1), #menu_expansion').mouseenter(function(){
    count++;
    $('#menu_expansion').show();
}).mouseleave(function(){
    count--;
    if (count == 0) { 
        $('#menu_expansion').hide();
    }
});


});

mouseleave用于隐藏另一个div的两个元素

2 个答案: