jquery onclick最も近いトグルを切り替えます

Question

jQueryを使用して最も近い#dropdown要素をトグルしようとしていますが、ulを見つけることができません。 jQueryは正常に読み込まれ、各要素はクリックを認識します。

HTMLコードは次のとおりです。

<li onclick="showDropDown()" class="filter-button"> 
          Filter by <strong>Aread</strong> + 
    <ul id="dropdown" class="dropdown-content"> 
     <li><a href="">Test 1</a></li> 
     <li><a href="">Test 3</a></li> 
     <li><a href="">Test 2</a></li> 
    </ul> 
</li> 

jQueryのコードです：

function showDropDown() { 
    jQuery(this).parents("li").find("ul").toggleClass('show'); 
    } 

Answer 1

dropdown ULはfilter-button李の子要素です。だから、あなたが

<li onclick="showDropDown(this)" class="filter-button"> 

、同様に現在のオブジェクトを渡す必要がありますあなたが本当に呼び出しインラインメソッドを使用する必要がある場合は、ここで

$(".filter-button").click(function() { 
    $(this).find("ul").toggleClass('show'); 
}); 

OR、

親を見つける必要がいけませんコード、

Answer 2

子要素とnextSibling要素の数が多い場合は、次のように記述する必要があります。

デモ：https://jsfiddle.net/nigayo/Lo3yf31y/1/

[JavaScriptを]

 $(".filter-button").click(function() { 
     $(this).find("ul:first").toggleClass('show'); 
     $(this).next("ul:first").toggleClass('show'); 
     }); 

[HTML]

<li class="filter-button"> 
    Filter by <strong>Aread</strong> + 
    <ul id="dropdown" class="dropdown-content"> 
     <li><a href="">Test 2</a></li> 
    </ul> 

    <ul id="dropdown2" class="dropdown-content"> 
     <li><a href="">Test 2</a></li> 
    </ul> 
    </li> 

    <ul id="dropdown_next" class="dropdown-content"> 
     <li><a href="">Test 2</a></li> 
    </ul> 
    <ul id="dropdown_next2" class="dropdown-content"> 
    <li><a href="">Test 2</a></li> 
    </ul> 

Answer 3

あなたはmethod呼び出しでthisオブジェクトを欠落していました。

デモhereを参照してください。

見つけてください以下のコード：

HTML：

<ul> 
    <li onclick="showDropDown(this)" class="filter-button"> 
    Filter by <strong>Aread</strong> + 
    <ul id="dropdown" class="dropdown-content"> 
     <li><a href="">Test 1</a></li> 
     <li><a href="">Test 3</a></li> 
     <li><a href="">Test 2</a></li> 
    </ul> 
    </li> 
</ul> 

JS：

function showDropDown(obj) { 
    $(obj).find("ul").toggle(); 
}