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

#sample2 ul表示获取<UL>元素，该元素是ID为sample2的元素的子元素。

您要找的是ul#sample2作为选择器，这意味着获取具有ID sample2的<UL>元素

Answer 2

你真的不需要jquery。一些简单的CSS将获得所需的结果：

ul#sample2 li ul
{
    display:none;
}
ul#sample2 li:hover ul
{
    display:block;
}

-- SEE DEMO --

编辑：这是一个3级示例：

-- 3 LEVEL DEMO --

Answer 3

编辑：这次得到它，我已经测试过了，所以我知道这有效，以下是你需要的js：

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

Answer 4

这应该可以解决问题。 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添加相同的悬停效果，{{1} }或$('#sample2 ul').hover(handler)会为你做那件事。问题是，你不能将鼠标悬停在隐藏的项目上。所以你真正想要的是选择＃sample2下的$('#sample2 ul').on('hover', handler)并将你的处理程序附加到他们的悬停事件。

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

Answer 5

$('#sample2 > li').hover(
function() {
   // show
   $('ul', this).show(100);
},
function() {
  // hide
  $('ul', this).hide(100);
});

DEMO

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

5 个答案: