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-dropdown的点击功能，将其滑出视图并将子视图带入视图，但我希望孩子li.back启动它向后滑动并将原始导航带入视图

我的问题是，如果孩子ul在li.has-dropdown中，单击任何链接会启动原始转换的行为。

点击其中一个li.has-dropdown将孩子ul滑入视图的最佳方法是什么，让孩子ul中的li.back将其滑回原来的状态？

非常感谢提前

Answer 1

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

阻止事件冒泡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"
    });
});

关于ul和ul内部函数的jQuery

1 个答案: