jQuery - mouseleaveイベントで複数の項目を監視する

Question

私が達成したいのは、ドロップダウンにカーソルを置いたときにアクティブなメニュー項目の緑色の枠線を表示しておきたい場合に、mouseleaveナビゲーションバーとドロップダウンホバーがドロップダウン上を移動すると消えます。このコードは.navigation-wrapper .naviのために働いていると、それはmouseleave上の必要がありますが、私もありますときに境界線を維持したいとの境界線が消え

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

：ボーダーアニメーションを処理するための

現在のJS .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 
     }); 
    } 
});