Javascript 防止鼠标指针上的下拉菜单在淡出时再次出现

基本上，我拥有的是一个下拉菜单，当我点击

#default li

时，会出现一个包含两个列表项的下拉菜单

ul

。其原理是，当您将鼠标移出下拉菜单

ul

或单击

子选项时，下拉菜单
ul
将
淡出。但是，如果我单击
.sub选项
，下拉菜单
ul
开始淡出，然后在
ul
淡出之前将鼠标悬停在
ul
上，它将停止淡出，并且
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;
        }
    });


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

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

上述工作会导致
单击事件上使用的
.stop（）
将停止任何正在进行的动画（一旦元素开始淡出切换，就会出现mouseleave
淡出（）
）并获胜！）


否则您需要停止DOM树上的单击气泡，并使用：


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

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

工作得很有魅力。我想说的是，stopPropagation的jquery文档有点不清楚，您能确切地解释一下它的功能吗？非常有用的注释，现在我完全理解了。非常感谢您。@Chrillewoodz-wups，我已经意识到我的答案有多离谱了实际上是的，您可以针对内部的LI元素并分配给它们！单击应停止传播。但在上述情况下，单击在任何情况下都会传播，这与我们使用
.stop（）
的方式有关。编辑。“很抱歉让事情复杂化了。”克莱尔伍兹在我的回答中添加了所有需要的内容。快乐编码