为选项卡及其关联的子菜单同步top-nav mouseleave

Question

我正在尝试创建一个top-nav菜单，如下所示：

我们的想法是，当您点击标签时，标签本身会以黑色突出显示，相关的菜单会显示在其下方。这很好。

如果鼠标离开标签页或菜单，我还希望菜单消失并且标签不会突出显示。这是我遇到麻烦的地方。目前，我用来处理这个问题的JQuery大致如下：

    $('.item-support a').click(function(e){
        // removeClass('curr') from all other tabs
            $('.item-support').addClass('curr');
            $('#submenu-support').fadeIn('fast');

            $('.item-support').mouseleave(function(e) {
                $('.item-support').removeClass('curr');
                $('#submenu-products').fadeOut('fast');

            });
        }else{ // Click again
            $('.item-support').removeClass('curr');
            $('#submenu-support').fadeOut('fast');
        }
        return false;
    });

    $('#submenu-products').mouseleave(function(e) {
            $('.item-support').removeClass('curr');
            $('#submenu-products').fadeOut('fast');
    });

    // Similar code for the other tabs

问题是选项卡和子菜单的mouseleave事件不同步。因此，例如，如果鼠标离开支撑选项卡并进入其下方的子菜单，子菜单将消失。我已经尝试了许多不同的方法来解决这个问题，甚至有一个粗略地使用pageX和pageY坐标的方法，但我正在寻找一个更优雅的解决方案。如何使选项卡及其关联的子菜单串联工作？有没有办法将两个div绑定在一起？或者在输入某个div时让mouseleave识别异常？

Answer 1

您可以检查是否有任何元素悬停，并执行以下操作：

$('.item-support, #submenu-support').mouseleave(function() {
    setTimeout(function() {
        if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {
            $('.item-support').removeClass('curr');
            $('#submenu-support').hide();
        }
    }, 50);
});

您也不应该在另一个事件的回调中绑定您的mouseleave事件。目前，每次单击item-support时，都会绑定另一个mouseleave事件。