如何使用jQuery Toggle定位具有公共类的特定元素？

Question

I'm creating a drop down menu that will be reused many times on a single page.

The following code works great when there's only one drop down menu. But when there are multiple drop downs, clicking a single .dropdown will result in all the .dd_menu 's on the page being revealed.

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>

Is there some what to target only the .dd_menu that is inside the particular .downdown which was clicked?

Answer 1

Limit the selector to the .dd_menu that is a child of the current clicked .dropdown div:

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

jQuery( selector [, context] ) :

• selector A string containing a selector expression
• context A DOM Element , Document, or jQuery to use as context

docs

You can also use the find function: $(this).find('.dd_menu') but it exactly the same. the context selector is calling the find function.

Answer 2

你可以尝试：

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

Answer 3

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