jquery has(） 似乎没有按预期工作

jquery has() doesn't seem to be working as expected

本文关键字：工作 has jquery      更新时间：2023-09-26

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

在小提琴中，当您单击"格式"时，它应该下拉，但它没有这样做。什么都没有发生，我以为使用 has() jquery 方法会起作用，但它没有这样做。我用错了吗？

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

在这种情况下.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）
  • 第三分区（强）

现在假设您想将它们过滤为仅包含ul的div。 您可以使用.has来执行此操作：

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

现在，您将拥有一个包含 1 个元素的结果集：

  • 第二个div（带ul）

使用 .has 不会像您期望的那样向下遍历到 ul。您应该像这样使用.find：

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

演示 http://jsfiddle.net/Qwdg6/或 http://jsfiddle.net/Qwdg6/1/

应用程序接口：

  • .find ： http://api.jquery.com/find/
  • .children ： http://api.jquery.com/children/： http://jsfiddle.net/Qwdg6/1/

无论您需要什么:)

法典

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

或

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

这个问题与事件处理程序的定义方式有关。如果您在回调中定位按钮，则可以从那里访问下拉列表：

$("ul > li").on("click", function(e){
    $(e.target).next("ul").css({display: "block"});
});

如果您希望下拉列表在再次单击按钮时向上滑动，可以执行以下操作：

$("ul > li").on("click", function(e){
    $(e.target).next("ul").slideToggle();
});
相关文章：