分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了JQuery选择器在我的多级导航栏上无法正常工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试制作一个具有多个级别的简单水平导航栏(但是现在,我只创建了一个带有一个子级的导航栏).我正在按照本教程 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或类),它确实有效,尽管我认为这是不必要的,因为可以使用css选择器选择那些子< ul> -s.

我究竟做错了什么？那些子级别真的只能使用指定的类/ id来选择吗？

解决方法@H_696_24@

这应该可以解决问题. 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以及如何使用选择器(特别是带有上下文的选择器,例如$(选择器,上下文))有一些困惑.

在你的例子中,$(‘#sample2 ul’)将选择每个ul作为#sample 2的后代.如果你想为每个ul添加相同的悬停效果,$(‘#sample2 ul’).hover(handler) )或$(‘#sample2 ul’).on(‘hover’,handler)将为您完成.问题是,你不能将鼠标悬停在隐藏的项目上.所以你真正想要的是在#sample2下选择li并将你的处理程序附加到他们的悬停事件中.

在你的悬停事件处理程序中,你使用选择器$(‘#sample2 ul：eq(0)’,this).该选择器中的’this’提供了将查找#sample2 ul：eq(0)的上下文.在事件处理程序中,这指的是与该事件关联的元素.在这种情况下,徘徊在li. Eq(0)在选择器的引号内没有位置,作为一般规则,应该避免作为任何jQuery选择器的一部分.因为在此上下文中没有#sample2元素,并且因为：eq(0)使选择器出错,$(‘#sample2 ul：eq(0)’,this)将返回一个空的jQuery对象(没有选中).你在处理程序中想要的是$(this).children(‘ul’).哪个将获得目前正在徘徊的李的直接孩子.