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')）然后您将获得一个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"});
});

Answer 2

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

API：

• .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"});
});

OR

$("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();
});