关于ul和ul函数的jQuery

Question

我有下面的导航结构

<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-down，它把它从视野之外，并使孩子ul进入视图，但我希望子li.back启动它滑动回来，并将原来的导航到视图。

我的问题是，当子ul在li.had下拉列表中时，单击任意链接就会启动初始转换的行为。

单击li.had下拉列表中的一个将儿童ul滑入视图，并让子ul中的li.back滑回原样的最佳方式是什么？

事先非常感谢

Answer 1

您需要在event.stopPropagation()事件处理程序中使用li.back。

防止事件在DOM树上冒泡，防止任何父处理程序被通知该事件。

代码

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