Question

我想要实现的是当我将鼠标悬停在下拉列表上时，保持活动菜单项的绿色边框可见，当我mouseleave导航栏和下拉列表时它会消失，当前它在悬停移动时消失在下拉列表中。

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

Answer 1

在代码中查看评论。您的代码无法正常工作，因为当鼠标离开.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 - 使用mouseleave事件观看多个项目

1 个答案: