jQuery - 使用mouseleave事件觀察多個項目

Question

當我將鼠標懸停在下拉菜單上時，我想要實現的是保持活動菜單項的綠色邊框可見，並且當導航欄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> 

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 
     }); 
    } 
});