javascript - jquery has() 似乎没有按预期工作

Question

我有这个 Fiddle ，由于某种原因，我的下拉菜单在单击时不起作用。

在 fiddle 中，当您单击“格式”时，它应该会下拉，但它没有这样做。什么也没有发生，我认为使用 has() jquery 方法可以工作，但它没有这样做。难道是我使用不当？

$("ul > li").on("click", function(){
    $(this).has("ul").css({display: "block"});
});

Answer 1

在这种情况下，

.has 不是您要查找的函数。这就是 has 的用途:

假设您有一个如下所示的 HTML 结构:

<div>
  <em>hey</em>
</div>

<div>
  <ul>
    <li>hello</li>
  </ul>
</div>

<div>
  <strong>hey</strong>
</div>

现在假设您使用 jQuery 选择器 ($('div'))，那么您将获得一个 jQuery 对象，其中包含 3 个不同的元素:

• 第一个 div(带 em)
• 第二个 div(带有 ul)
• 第三个 div(强)

现在假设您想将它们过滤为仅包含内部有 ul 的 div。您可以使用 .has 来做到这一点:

$('div').has('ul')

现在您将得到一个包含 1 个元素的结果集:

• 第二个 div(带有 ul)

使用 .has 不会像您期望的那样向下遍历到 ul。您应该只使用 .find 来代替，如下所示:

$("ul > li").on("click", function(){
    $(this).find('ul').css({display: "block"});
});