jquery - 我如何使用 jQuery 处理这个递归菜单中的悬停？

Question

在我下面的菜单中，我的 CSS 中有这个:

ul li ul {display:none;}

当选择一个菜单项时，我使用这个 jQuery 来显示子菜单:

$('ul li.selected ul').show();

所以我对如何处理顶级菜单的悬停感到困惑。当我将鼠标悬停在顶级菜单项上时，如何隐藏所有子菜单并仅显示悬停的元素。但是当悬停它时，我需要它再次显示 li.select 原来的样子。我该怎么做？

<div class="menu">
<ul>
    <li class="administration first selected">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>
</div>

Answer 1

它应该只是 $('ul li.selected:hover ul').show();。如果没有，请更详细地解释您想要什么。

另一种方法是使用:

$('ul li.selected').hover(
    function() {
        $(this).find("ul").show();
    },
    function() {
        $(this).find("ul").hide();
    }
);

参见 http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/一个很好的例子。如果上面的代码不起作用，则使用上面的页面 - 它有一个使用 .hover() 的很好的工作示例。

您还可以获得各种非常酷的显示和隐藏效果 - 例如淡入淡出、盲目等等。查找 jQuery UI。