Question

Basicllay i have a div with a class called .li-level-1, and inside that i have differnt ul’s with lists. i Have it set up so when you click on a li-level-1 div displays the ul’s and li’s inside that div by animating a drop down and when you click on the next one it closes the one previously opened and slidesDown the next one.

the only thing is the a links that are inside the div’s seem to trigger the slideUp/Down on level-1 and animation as well.

any Suggestions?

$('.sitemap_page .li-level-1').each(function(){
    $(this).find('ul.ul-level-2').hide();
    $(this).click(function(){
        var this_list = $(this);
        this_list.parent().find('.open').each(function(){
            $(this).slideUp(function(){
                this_list.find('ul.ul-level-2').addClass("open").slideDown();
            }).removeClass('open');
        });
        if(this_list.find('ul.ul-level-2.open').length == 0) {
            this_list.find('ul.ul-level-2').addClass("open").slideDown();
        }
    });
});

Answer 1

That’s because of event bubbling: the click event raised on the <a> elements bubble up to their containing <div> and cause your event handler to execute.

One way to work around that problem would be to use event.target to determine the event’s origin, and only perform the sliding animations if the event did not originate on a link:

$(this).click(function(event) {
    if (!$(event.target).is("a")) {
        var this_list = $(this);
        this_list.parent().find('.open').each(function() {
            $(this).slideUp(function() {
                this_list.find('ul.ul-level-2').addClass("open").slideDown();
            }).removeClass('open');
        });
        if (this_list.find('ul.ul-level-2.open').length == 0) {
            this_list.find('ul.ul-level-2').addClass("open").slideDown();
        }
    }
});