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