jquery - jQuery-使用mouseleave事件观看多个元素

我要实现的是，当我将鼠标悬停在下拉菜单上时，使活动菜单项的绿色边框保持可见，并且当我mouseleave导航栏AND下拉菜单时，绿色边框应该消失，当前，当鼠标悬停在下拉菜单上时，边框会消失。



当前用于处理边框动画的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
    });
}

该代码适用于.navigation-wrapper .navi，边框会像在mouseleave上一样消失，但是当.dropdown-wrapper上有活动的鼠标悬停时，我也想保留边框。我尝试过这种方法How to detect mouseleave() on two elements at once?，但是我无法弄清楚如何使其适用于我的情况。

相关HTML：

<div class="navi-wrapper">
    <nav class="row navigation">
        <div class="navigation-wrapper indication">
            <ul class="navi">
                <li class="has-dropdown">
                    <a href="#1">
                        <span class="content">
                             Telefoni <span>&amp; naprave</span>
                         </span>
                     </a>
                 </li>
                 <li class="has-dropdown">
                     <a href="#2">
                         <span class="content">
                             Paketi <span>&amp; storitve</span>
                         </span>
                     </a>
                 </li>
                 <li class="has-dropdown">
                     <a href="#3">
                         <span class="content">
                             Internet <span>& omrežje</span></span>
                         </span>
                     </a>
                 </li>
                 <li class="has-dropdown secondary help pull-right">
                      <a href="#4">
                          <i class="icon-question"></i>
                          <span class="content">
                              Pomoč <span>&amp; informacije</span>
                          </span>
                      </a>
                 </li>
                 <li class="login-status secondary main pull-right">
                      <a href="#">
                          <i class="icon-person"></i>
                          <span class="content">
                              Moj A1<span class="mobile-small">Neprijavljen</span>
                          </span>
                      </a>
                 </li>
            </ul>
        </div>
    </nav>
</div>

<div class="dropdown-wrapper">
     <ul id="1" class="dropdown">
         ...
     </ul>

     <ul id="2" class="dropdown">
         ...
     </ul>

     <ul id="3" class="dropdown">
         ...
     </ul>

     <ul id="4" class="dropdown">
         ...
     </ul>

</div>

最佳答案

查看代码中的注释。您的代码无效，因为当鼠标离开.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
        });
    }
});

关于jquery - jQuery-使用mouseleave事件观看多个元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41936136/