JQuery 选择器在我的多级导航栏上无法正常工作

Question

我正在尝试制作一个具有多个级别的简单水平导航栏(但目前，我只制作了一个具有一个子级别的导航栏)。我正在学习本教程 here有一些修改:

<ul id = "sample2">
    <li>
        <a href="#">About Us</a>
        <ul>
            <li><a href="#">Website</a></li>
            <li><a href="#">Creator</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Our Products</a>
        <ul>
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Just give us money</a></li>
        </ul>
    </li>
    <li>
        <a href="#">FAQs</a>
        <ul>
            <li><a href="#">What is this?</a></li>
            <li><a href="#">Why should I care???</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
        <ul>
            <li><a href="#">Telephone</a></li>
            <li><a href="#">Mobile Phone</a></li>
            <li><a href="#">E-mail</a></li>
        </ul>
    </li>
    <li><a href="#">Login</a></li>
</ul>

我在主 <ul> 上只使用了一个 id我正在使用 #sample2 ul 访问子级别而不是在这些上使用类。

但是，当我使用 JQuery 代码时它根本不起作用:

$(function () {
    $('#sample2 ul').each(function () {
        $(this).parent().eq(0).hover(function () {
            $('#sample2 ul:eq(0)', this).show(100);
            }, function () {
            $('#sample2 ul:eq(0)', this).hide(100);
        });
    });
});

同样，我只更改了教程的 .dropdown类别为 #sample2 ul .

但如果我按照教程的方式进行操作(即在子级别上分配一个 id 或一个类)，它确实有效，尽管我认为这是不必要的，因为那些子 - <ul> -s 可以使用 css 选择器来选择。

我做错了什么？那些子关卡真的只能使用分配给它们的类/id 来选择吗？

Answer 1

这应该可以解决问题。 jsFiddle

$(function () {
    $('#sample2').on('hover', 'li', showSubMenu);
    $('#sample2').on('mouseleave', hideSubMenus);
});

function showSubMenu(){
    $(this).siblings().children('ul').hide(100);
    $(this).children('ul').show(100);
}
function hideSubMenus(){
    $(this).find('ul').hide(100);
}

编辑:您似乎对 jQuery 以及如何使用选择器(特别是具有上下文的选择器，例如 $(selector, context))有些困惑。

在您的示例中，$('#sample2 ul') 将选择作为#sample 2 后代的每个 ul。如果您想添加相同的悬停对每个 ul、$('#sample2 ul').hover(handler) 或 $('#sample2 ul').on('hover' , handler) 会为你做这件事。问题是，你不能将鼠标悬停在隐藏的项目上。所以您真正想要的是选择 #sample2 下的 li 并将您的处理程序附加到它们的悬停事件。

在您的悬停事件处理程序中，您使用选择器 $('#sample2 ul:eq(0)', this)。该选择器中的“this”提供了将在其中查找 #sample2 ul:eq(0) 的上下文。在事件处理程序中，this 指的是与该事件关联的元素。在本例中，悬停在 li 上方。 Eq(0) 在选择器的引号内没有位置，作为一般规则，应避免作为任何 jQuery 选择器的一部分。因为在 this 的上下文中没有 #sample2 元素并且因为 :eq(0) 使选择器格式错误，$( '#sample2 ul:eq(0)', this) 将返回一个空的 jQuery 对象(未选择任何内容)。您在处理程序中想要的是 $(this).children('ul')。这将获取当前悬停的 li 的直接子级 ul。