Q:

jQuery on function on ul and ul inside it

I have the following structure for a nav
<ul class="parentul">
     <li class="has-dropdown">
           <a href="">Link title<span class="desc">Link desc</span></a>
          <ul class="dropdown">    
                <li class="title back">
                    <h5><a href="#">Back</a></h5>
                </li>
                <li>
                    <h5><a href="#">Option 1</a></h5>
                </li>
                <li>
                    <h5><a href="#">Option 2</a></h5>
                 </li>
           </ul>
     </li>
</ul>

jQuery:
$('ul > li.has-dropdown').on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    $this.addClass('moved');
    $('.parentul').animate({
        left: "-100%"
    });

}); 

$('ul > li.has-dropdown.moved > ul > li.back').on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    $this.closest('.has-dropdown').removeClass('moved');
    $('.parentul').animate({
        left: "0"
    });
});

I have an on click function for the li.has-dropdown that slides it out of view and brings the child ul into view, however I want the child li.back to initiate it sliding back and bringing the original nav into view.
My problem is that, where the child ul is inside the li.has-dropdown, clicking any link initiates the behaviour of the original transition.
What is the best way to click on one of the li.has-dropdown to slide the child ul into view, and have the li.back in the child ul slide it back to how it was?
Many thanks in advance

A:

You need to use event.stopPropagation() in li.back event handler.

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

Code
$('ul > li.has-dropdown.moved > ul > li.back').on('click', function(e){
    e.stopPropagation();

    var $this = $(this);
    $this.closest('.has-dropdown').removeClass('moved');
    $('.parentul').animate({
        left: "0"
    });
});

