0

我需要我的子菜单 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 时，我需要隐藏子菜单 - 任何人都可以建议如何做到这一点？谢谢。

4

2 回答 2

0

如果您想显示一次 #menu1_expansion 并使其保持可见：尝试 mouseover() 而不是 hover。

悬停功能仅在您将对象悬停时触发，当您不指向元素时不会触发。

于 2013-02-03T21:03:33.160 回答
0

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

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


});
于 2013-02-04T18:51:51.570 回答