JQuery на функции на ул и ул внутри него

У меня есть следующая структура для навигации

<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"
    });
});

У меня есть функция щелчка для раскрывающегося списка li.has, которая выводит его из поля зрения и выводит дочерний элемент ul, однако я хочу, чтобы child li.back инициировал его сползание назад и приведение оригинального навигатора в режим просмотра.

Моя проблема заключается в том, что, когда дочерняя ul находится внутри выпадающего списка li.has, нажатие любой ссылки инициирует поведение исходного перехода.

Каков наилучший способ щелкнуть по одному из выпадающего списка li.has, чтобы переместить дочернюю улицу в представление, и чтобы li.back в дочерней ульке возвращал ее обратно к тому, как это было?

Спасибо заранее