javascript - jQuery Toggleを使用して、共通クラスを持つ特定の要素をターゲットにする方法は?

Question

1 つのページで何度も再利用されるドロップダウン メニューを作成しています。

次のコードは、ドロップダウン メニューが 1 つしかない場合にうまく機能します。ただし、複数のドロップダウンがある場合、1 つをクリックすると、ページ上の.dropdownすべてのが表示されます。.dd_menu

JS:

$(document).ready(function() {
   $('.dropdown').click(function(){
      $('.dd_menu').toggle();
   });
});

HTML:

<div class="dropdown">
    <a class="mini_button" href="#">Actions</a>

    <div class="dd_menu">
        <a href="http://example.com">Link</a>
        <a href="http://example.com">Link</a>
        <a href="http://example.com">Link</a>
    </div>
</div>

クリックした項目.dd_menuの中にあるものだけを対象にするものはありますか？.downdown

Answer 1

.dd_menuセレクターを、現在クリックされている.dropdowndivの子に制限します。

$(document).ready(function() {
   $('.dropdown').click(function(){
      $('.dd_menu', this).toggle(); // <========== used this as a context.
   });
});

jQuery( selector [, context] ):

• selectorセレクタ式を含む文字列
• contextコンテキストとして使用するDOM Element、 Document または jQuery

ドキュメント

findfunction:も使用できます$(this).find('.dd_menu')が、まったく同じです。コンテキストセレクターが関数を呼び出していfindます。

Answer 2

あなたは試すことができます：

$(this).children('.dd_menu').toggle();

Answer 3

$(document).ready(function() {
   $('.dropdown').on('click', 'a', function(){
       $('.dd_menu:eq('+$(this).parent().index()+')').toggle();
   });
});​