jquery - 使用 jQuery 选择器选择有 child 但没有孙子的元素

Question

我正在尝试选择有子项的列表项，但不选择作为孙项的列表项。考虑以下结构:

<ul id="parent">
   <li>
      <a href="#"></a>
      <ul> <!-- add open class -->
        <li><a href="#"></a></li>
        <li>
            <a href="#"></a>
            <ul>  <!-- do not add any class -->
                <li><a href="#"></a></li>
            </ul>
        </li>
      </ul>
   <li>
</ul>

我像这样隐藏所有子列表:

#parent li > ul {display:none}

当我将鼠标悬停在任何顶级列表项上时，我想为其子项添加一个类 <ul>但不是它的孙子<ul> .所以在上面的树中我写了 <ul>需要添加一个类。

以下选择所有包含子项的列表项:

$("#parent li:has(ul)").hoverIntent( showSubNav, hideSubNav );

我需要这个来只选择有 child 的顶级列表项，但我不希望当我将鼠标悬停在也有 child 的孙子列表项上时触发此功能。

我怎样才能做到这一点？

Answer 1

使用后代选择器。

$("#parent > li:has(ul)").hoverIntent( showSubNav, hideSubNav );

这只会做 $.hoverIntent()关于直系子女li有 child 的ul .

如果要显示相邻ul当您将鼠标悬停在 <a> 上时，然后是:

$('#parent > li > a').hover(function() {
    $(this).next('ul').addClass();
});

悬停在顶层 <li>然后添加一个类到它的立即<ul> child :

$('#parent > li').hover(function() {
    $(this).child('ul').addClass();
});