javascript - jQuery on ul 上的函数和其中的 ul

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎偏离主题，因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a minimal example在问题本身。

已关闭 9 年前。

Improve this 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 的点击功能，可以将其滑出 View 并使子 ul 进入 View ，但是我希望子 li.back 启动它滑回并将原始导航带入 View .

我的问题是，子 ul 位于 li.has-dropdown 内，单击任何链接都会启动原始转换的行为。

单击 li.has-dropdown 之一将子 ul 滑入 View ，并让子 ul 中的 li.back 将其滑回到原来的状态的最佳方法是什么？

提前非常感谢

Answer 1

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

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

代码

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