jQuery has（）似乎没有按预期工作

Question

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

在小提琴中，当您单击“格式”时，它应该会下拉，但它并没有这样做。 什么也没发生，我认为使用has() jQuery方法会起作用，但没有这样做。 我使用不正确吗？

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

Answer 1

在这种情况下， .has不是您要查找的功能。 这是用于：

假设您有一个HTML结构，如下所示：

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

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

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

现在说您使用一个jQuery选择器（ $('div') ），然后您将获得一个包含3个不同元素的jQuery对象：

• 第一分部（含em）
• 第二div（与ul）
• 第三股（强势）

现在说您想将其过滤为仅包含ul div。 您可以使用.has来做到这.has ：

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

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

• 第二div（与ul）

使用.has不会像您期望的那样遍历到ul。 您应该只使用.find如下所示：

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

Answer 2

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

API：

• .find ： http : .find
• .children ： http : .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"});
});

Answer 3

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

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

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

$("ul > li").on("click", function(e){
    $(e.target).next("ul").slideToggle();
});