0

几个小时以来一直在为这个简单的选择器问题苦苦挣扎，而且肯定遗漏了一些明显的东西。我有一个<ul>其中一些<li>s 嵌套了<ul>s。每个都<li>包含一个链接，当单击它时，我想执行一个功能（而不是导航），但重要的是，这应该只发生在父级中包含的<ul>链接，而不是任何可能存在于嵌套<ul>. 你会认为很简单：

HTML：

<ul>
    <li>
        <a href="dontleavethis.page">A link</a>
        <ul>
            <li><a href="navigate.there">A nested link</a></li>
            <li><a href="navigate.somewhere">Another nested link</a></li>
        </ul>
    </li>
</ul>

jQuery：

$('li:has(ul) a').click(function() { 
    bla bla bla...
    return false;
});

问题是，无论我如何表达我的选择器，我都无法阻止嵌套中的链接<ul>触发点击处理程序。它们显然不符合":has(ul)"选择器的标准，但由于某种原因，处理程序仍然被附加。我在这里做错了什么？

4

5 回答 5

6 
$('li:has(ul) > a').click(...)

您的问题是，这$('li:has(ul) a')意味着the中的所有 a元素，而不仅仅是直接子元素。lihasul

于 2009-09-03T14:38:17.647 回答
1 
$('ul > li:has(ul) > a').click(function(){
    bla bla bla....
    return false;
});
于 2009-09-03T14:38:14.090 回答
0

会不会是事件被传播了？

怎么样

$('ul > li:has(ul) > a').click(function(event){
  bla bla bla....
  event.stopPropagation();
  return false;
});
于 2009-09-03T14:44:25.770 回答
0

如果你给顶级链接一个类，你可以直接访问它们，而不需要任何复杂的（ish）选择器逻辑。

于 2009-09-03T14:39:48.613 回答
0

您应该给主 ul 一个 id，我将使用“main”，但您应该尝试考虑一个更具描述性的 ID（为了您自己的利益）。然后你可以使用

$('ul#main > li > a').click(function() { 
    bla bla bla...
    return false;
});

> 将仅选择元素的直接祖先。

-edit- 没关系，这也意味着没有 ul 的 li 将具有样式。@idrumgood 的解决方案是最好的。

于 2009-09-03T14:39:53.853 回答