JQuery選擇器在我的多級導航欄上無法正常工作

Question

我正在嘗試制作一個具有多個級別的簡單水平導航欄（但是現在，我只創建了一個帶有一個子級的導航欄）。 我在這里通過一些修改來學習本教程：

<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選擇器選擇那些sub- <ul> -s。

我究竟做錯了什么？ 那些子級別真的只能使用指定的類/ 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;
}​​​

- 看見演示 -

編輯：這是一個3級示例：

- 3個級別的演示 -

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)例如$(selector, context) ）有一些困惑。

在你的例子中， $('#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)的上下文。 在事件處理程序中， this指的是與該事件關聯的元素。 在這種情況下，徘徊在li 。 Eq（0）在選擇器的引號內沒有位置，作為一般規則，應該避免作為任何jQuery選擇器的一部分。 因為沒有#sample2的范圍內元素this和因為:eq(0) malforms選擇， $('#sample2 ul:eq(0)', this)將返回一個空jQuery對象（沒有選擇）。 你在處理程序中想要的是$(this).children('ul') 。 這將獲得ul是目前盤旋在李的直接孩子。

Answer 5

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

DEMO