jQuery onclick显示第一个父div

Question

I have an issue with a show of a parent div at onclick. As here:

 $('#click').click(function() {
    $(this).parent().closest('div').slideToggle("fast");

});

http://jsfiddle.net/bk1hLoyb/

I need to show the .show div at the li click, and i need to hide the first when i click another. Someone know's a method? Thanks so much

Answer 1

Id's should be unique on the page.

$('.click').click(function() {
        $('.show').hide();
        $(this).find('.show').slideToggle("fast");
    });

http://jsfiddle.net/bk1hLoyb/11/

Answer 2

First Id's must be unique so change it for:

<li class="click">
        <a href="#">Bye</a>
        <div class="show">Hey</div>
</li>

and the code change it for:

$('.click').click(function() {
        $(this).find('div').slideToggle("fast");
});

LIVE DEMO

Answer 3

Some suggestions:

• remove all duplicate IDs
• if you must use a selector on the li elements, use a class
• .show is a child of the li that's clicked, so there's no need to use .parent() or .closest() .

Code:

$('.click').click(function() {
    $('.show', this).slideToggle("fast");    
});

DEMO

BONUS

• $(elm).find('.selector') is equivalent to $('.selector', elm)
• Also written as jQuery( selector [, context ] )
• When context is not specified, it is assumed to be document
• Thus $(elm) is equivalent to $(elm, document)

Answer 4

On your "li"s change the id to a class so you can reference multiple divs.

Then on the script looks like this:

$('.click a').click(function() {
    var item = $(this);
    $(this).parent().siblings().find('.show').slideUp(400,function(){
        item.parent().find('.show').slideDown(400);
     });
});

See it working on your fiddle (sorry for updating without forking)