jQuery菜单悬停问题

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

问题是，当您将鼠标从

我认为我需要的是一种选择两者的方法.consumers 及其所有子元素都在一个 jQuery 选择器语句中，可能类似于 $('.consumers > * (但包括 .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()})