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.