javascript - 防止下拉 ul 在淡出时重新出现在 mouseenter 上

Question

基本上我有一个下拉菜单，当我单击 #default li 时，会出现一个包含两个列表项的下拉菜单 ul。这个想法是，当您将鼠标移出下拉列表 ul 或单击 .sub-option 时，下拉列表 ul 将淡出。但是，如果我单击 .sub-option 并且下拉列表 ul 开始淡出，然后将鼠标悬停在 ul fadeOut 完成后，它将停止淡出并且 ul 将重新出现。我如何防止这种情况发生？当您将鼠标移到 ul 淡出时，我不希望发生任何事情。

我尝试添加一个 mouseenter 事件来检查 ul 是否被激活，但我不确定在这个函数中到底放了什么，一个简单的 return 无效。关于如何更改下面的代码以使其正常运行的任何想法？

下拉列表:

<ul id="sort-options">
    <li id="default"><span>A-Ö</span>
        <ul>
            <li class="sub-options">A-Ö</li>
            <li class="sub-options">Ö-A</li>
        </ul>
    </li>
</ul>

切换下拉列表的脚本:

    $('#default').on('click', function() {

        $('#default ul').stop().fadeToggle();
    });

    $('#default').on('mouseleave', function() {
        $('#default ul').stop().fadeOut();
    });

    $('#default').on('mouseenter', function() {

        if ($('#default ul').is(':animated')) {
            return;
        }
    });

Answer 1

jsBin demo

$('#default').on('click', function(e) {
  $('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
  $('ul', this).fadeOut(); /* don't use .stop() */
});

上述工作导致 click 事件上使用的 .stop() 将停止任何正在进行的动画(mouseleave fadeOut()一旦元素开始 fadeToggle) 就会发生并获胜! :)

---

否则您需要停止在 DOM 树中向上冒泡并使用:

jsBin demo using event.stopPropagation

$('#default').on('click', function() {
  $('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
  $('ul', this).stop().fadeOut(); // use .stop() but the issue will appear
});

$('#default li').on('click', function(e) {
  e.stopPropagation();  // so dont let #default register any inner LI clicks
});