jQuery-使用mouseleave事件监视多个项目

我想要实现的是，当我将鼠标悬停在下拉菜单上时，使活动菜单项的绿色边框保持可见，当我

mouseleave

导航栏和下拉菜单时，绿色边框应该消失，当前当鼠标悬停在下拉菜单上时，绿色边框消失

$('.navigation-wrapper .navi').mouseleave(function() {
    // Find the dropdown
    var $dropdown = $(".dropdown-wrapper");
    // Delete any old bindings
    $dropdown.off("mouseleave.indicator");
    // If the dropdown is being hovered, wait until the mouse leaves to animate out
    if($dropdown.is(":hover")){
        $dropdown.one("mouseleavee.indicator", function(){
            indicator.stop().animate({
                left: 0,
                width: 0
            }, 150, function() {
                // Animation complete
            });
        });
    }
    // The mouse is not over the dropdown menu, animate out
    else{
        indicator.stop().animate({
            left: 0,
            width: 0
        }, 150, function() {
            // Animation complete
        });
    }
});

处理边界动画的当前JS：

var menu      = $('.indication'),
    indicator = $('<span class="indicator"></span>');

menu.append(indicator);

menu.find('.has-dropdown, .login-status').mouseenter(function() {
    position_indicator($(this));
});

$('.navigation-wrapper .navi, .dropdown-wrapper').mouseleave(function() {
    indicator.stop().animate({
        left: 0,
        width: 0
    }, 150, function() {
        // Animation complete
    });
});

function position_indicator(el) {
    var left = el.position().left + 20;
    var width = el.width();
    indicator.stop().animate({
        left: left,
        width: width
    }, 150, function() {
        // Animation complete
    });
}

---

请参阅代码中的注释。您的代码无法工作，因为当鼠标离开

.navi

时，它被触发。jQuery选择器不会将单独的元素相加。为了避免这个问题，我们检查鼠标是否在下拉列表上，如果在下拉列表上，我们将移除指示器绑定到离开下拉列表

$('.navigation-wrapper .navi').mouseleave(function() {
    // Find the dropdown
    var $dropdown = $(".dropdown-wrapper");
    // Delete any old bindings
    $dropdown.off("mouseleave.indicator");
    // If the dropdown is being hovered, wait until the mouse leaves to animate out
    if($dropdown.is(":hover")){
        $dropdown.one("mouseleavee.indicator", function(){
            indicator.stop().animate({
                left: 0,
                width: 0
            }, 150, function() {
                // Animation complete
            });
        });
    }
    // The mouse is not over the dropdown menu, animate out
    else{
        indicator.stop().animate({
            left: 0,
            width: 0
        }, 150, function() {
            // Animation complete
        });
    }
});

---

请显示相关的html结构，因为我知道我错过了一些东西，额外的html现在提供。谢谢@charlietfl这是什么意思

.navigation wrapper.navi

和

.dropdown wrapper

是两个独立的元素，没有任何相关的父元素。对了，我没有看到逗号…还没有足够的咖啡morning@charlietfl当用户移动到下拉菜单时，鼠标不再位于导航上。这就是我认为OP所针对的行为。@dTilen很高兴听到：）有任何原因说明上面的代码在IE中不起作用吗

.indicator

设置动画，就像（$dropdown.is（“：hover”）不是那样there@dTilen我猜IE正在渲染元素之间的间隙。您可以使用

setTimeout

.is（':hover'）

将mouseleave绑定的匿名函数的内容包装起来，因为它导致IE/Firefox出现问题，所以我将其替换为

.hover（函数）

，它可以正常工作：）