jQuery slideUp（）影响其他列表的slideDown（）

Question

I am facing a problem. I have some list items. When a list is clicked, it's own child will be open and an '.open' class will be added. When clicking on that '.open' class, that list's child will be hidden. So, I made my code like this:

$('body').on('click', '.list-group li a', function() {
    // hide all other child
    $('.list-group .child').hide();
    $('.list-group li a').removeClass('open');

    // Open this list's child
    $(this).addClass('open');
    $(this).parent().find('.child').slideDown();
});

$('body').on('click', '.list-group li a.open', function() {    
    // hide this list's child
    $(this).removeClass('open');
    $(this).parent().find('.child').slideUp();
});

But, at the time of hiding the $(this) list's child, it will try to slideDown() at first and then slideUp() ! I can understand that this code might be responsible for this:

// hide all other child
$('.list-group .child').hide();
$('.list-group li a').removeClass('open');

How to fix this?

Fiddle Work

Answer 1

It looks like your click listeners are firing both times when .open is applied. Using a :not selector in your .on('click', '.list-group li a') function seems to solve this

$('body').on('click', '.list-group li a:not(.open)', function() {
    // ....
}

JSFiddle Link