鼠标单击时无法隐藏/显示div

Question

I have a div contents of which are dynamically generated. I am trying to implement hide/show facility. It kinda works but I am looking at "Hide/show only the div that's clicked."

HTML

<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Val1</li>
        <li>Val2</li>
        <li>val3</li>
    </ul>
</div>

<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
    <ul>
        <li>val4</li>
        <li>val5</li>
        <li>val6</li>
    </ul>
</div>

JavaScript

$(document).ready(function() {
    $('.showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Fiddle

Answer 1

Use relative looks up for the menu item, instead of a document wide look up( $('.menu') ).

In your case the showmenu and menu items are next siblings, so you can use .next()

 $(document).ready(function() { $('.showmenu').click(function() { $(this).next('.menu').slideToggle("fast"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="showmenu">First Div</div> <div class="menu" style="display: none;"> <ul> <li>Val1</li> <li>Val2</li> <li>val3</li> </ul> </div> <div class="showmenu">Second Div</div> <div class="menu" style="display: none;"> <ul> <li>val4</li> <li>val5</li> <li>val6</li> </ul> </div> 

Answer 2

You need to find the .menu element related to the element which was clicked. To do that you can traverse from the element that raised the event using the this keyword and the next() method. Try this:

$('.showmenu').click(function () {
    $(this).next('.menu').slideToggle("fast");
});

Example fiddle

Answer 3

Use this :

$(this) inside the click event handler is the menu that is clicked. next will give menu associated with it.

$(document).ready(function() {
    $('.showmenu').click(function() {
        $(this).next('.menu').slideToggle("fast");
    });
});

Demo: http://jsfiddle.net/tusharj/APA2S/4502/

Answer 4

Use .next() in jquery and $(this) for current object

$('.showmenu').click(function() {
    $(this).next('.menu').slideToggle("fast");
});

Fiddle

Answer 5

Your looking for jQuery next()

 $(document).ready(function() { $('.showmenu').click(function() { $(this).next('.menu').slideToggle("fast"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="showmenu">First Div</div> <div class="menu" style="display: none;"> <ul> <li>Val1</li> <li>Val2</li> <li>val3</li> </ul> </div> <div class="showmenu">Second Div</div> <div class="menu" style="display: none;"> <ul> <li>val4</li> <li>val5</li> <li>val6</li> </ul> </div>