Question

我有一个相当简单的菜单：

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li><a href="consumers.htm" title="" class="consumers">Consumers</a>
         <ul id="consumer-menu">
            <li> --snip--

和

    $(document).ready(function() {
        $('.consumers').hover( function() {
            $("#consumer-menu").fadeIn();
        }, function() {
            $("#consumer-menu").fadeOut();
        });
    });

问题在于，当你将鼠标移离＆lt; li class =“consumer”..＃consumer-menu dissapears（应该如此）时，我尝试使用$（'。consumer，＃consumer-menu但是这不起作用（你从＃consumer-menu鼠标移到.consumers，然后菜单再次淡出。）

我认为我需要的是一种在一个jQuery选择器语句中选择.consumers及其所有子项的方法，可能类似$（'。consumers＆gt; *（但包括.consumers）。

感谢您的帮助！

约翰。

Answer 1

考虑到上下文，我能想到的最简单的答案是像这样重构HTML：

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li class="consumers"><a href="consumers.htm" title="">Consumers</a>
         <ul id="consumer-menu">
             <li>test</li>
             <li>test</li>
         </ul>
    </li>
</ul>

这应该可以解决jQuery的问题。

（使用http://jsfiddle.net/MgbdN/测试）

Answer 2

您如何看待这里的解决方案：http://jsfiddle.net/WDktv/

基本上，每当你将鼠标悬停在ul（或菜单节点上，更一般）时，你应该淡入其子菜单ul（菜单节点）

<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
    <a href="#">Three (+)</a>
    <ul style="display:none;">
        <li><a href="#">Three and a half</a></li>
        <li><a href="#">Three and three quarters</a></li>
    </ul>
</li>
<li><a href="#">Four</a></li>

$('li').hover(
    function(){$("ul", this).fadeIn()}, 
    function(){$("ul", this).fadeOut()})

jQuery菜单悬停问题

2 个答案: