4

我正在尝试制作一个具有多个级别的简单水平导航栏（但现在，我只制作了一个具有一个子级别的导航栏）。我在这里按照本教程进行了一些修改：

<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>

我在主目录上只使用了一个 id，<ul>并且我正在使用#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>可以使用 css 选择器选择这些 sub-s。

我究竟做错了什么？这些子级别真的只能使用分配的类/ID来选择吗？

4

5 回答 5

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')将选择每个ul#sample 2 的后代。如果您想为每个添加相同的悬停效果ul，$('#sample2 ul').hover(handler)或者$('#sample2 ul').on('hover', handler)将为您执行此操作。问题是，您不能将鼠标悬停在隐藏的项目上。所以你真正想要的是选择li#sample2 下的并将你的处理程序附加到他们的悬停事件。

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

于 2012-04-26T16:50:39.573 回答
1

编辑：这次知道了，我已经测试过了，所以我知道这是可行的，以下是您需要的 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);
        });
    });
});
于 2012-04-26T16:23:25.227 回答
1

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

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

于 2012-04-26T16:19:05.727 回答
1

你真的不需要jquery。一点简单的 CSS 就会得到想要的结果：

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

-- 看演示 --

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

-- 3 级演示 --

于 2012-04-26T16:19:16.443 回答
0 
$('#sample2 > li').hover(
function() {
   // show
   $('ul', this).show(100);
},
function() {
  // hide
  $('ul', this).hide(100);
});

演示

于 2012-04-26T16:20:26.927 回答