jQuery nested animation conflict

Question

I created a simple multi level push menu with the following code:

HTML

<li class="mobile_main_menu_headers">
  <h3 class='expand'>Top</h3>
  <ul class="mobile_main_menu_sub">
     <li class="mobile_main_menu_sub_back">Back</li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
     <li><a href="">Sub</a></li>
  </ul>
</li>

jQuery

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

The problem is when clicking .mobile_main_menu_sub_back, the animation does go to left: 100% but then immediately jumps back to left: 0px afterwards. I've created a simple jsfiddle you can view here:

http://jsfiddle.net/M8N6f/

Click the Top text to see the animation slide left. Then click the Back text to see the issue.

I just want to the back button to animate the ul to the right, that's it.

Thanks

Answer 1

Try below:

$(".expand").click(function(){             
    $('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
});

DEMO HERE I've updated your code and made it simple, why are you writing it like that? For a specific reason or other functions you didn't include here?

EDIT: In case you have multiple menu elements Updated DEMO

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    event.stopPropagation(); //Add this line;
});

Answer 2

You can simply stop the event propagation from bubbling upward by returning false from the event handler on the back li:

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(){
    $(this).parent('ul').animate({left:'100%'});
    return false;
});

EXAMPLE

Alternatively, jQuery has a function that does just that event.stopPropagation():

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(".mobile_main_menu_headers").click(function(){               
    $(this).find('.mobile_main_menu_sub').animate({left:'0px'});
});

$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});

EXAMPLE

You can read more about Events, Event Propagation, Bubbling and more here.

Answer 3

The problem your code is not working is:

You have binded click event to .mobile_main_menu_headers which is containing the <li>. So when the you click the back link in the <li> even the parent .mobile_main_menu_headers click is also trigger. i.e the event is bubbling up

You can solve this by the following methods:

remove the click event from the container .mobile_main_menu_headers and bind it to .expand element.

$(".expand").click(function(){             
            $('.mobile_main_menu_sub').animate({left:'0px'});
        });

stopEventPropogation, in the '.mobile_main_menu_sub_back' click event.

$('.mobile_main_menu_sub_back').click(function(e){
    e.stopImmediatePropagation();
    $(this).parent('ul').animate({left:'100%'});
});

or

$('.mobile_main_menu_sub_back').click(function(e){
    $(this).parent('ul').animate({left:'100%'});
    e.stopPropagation();
});