mouseleaveにJquery hover meny delayが隠れているが、マウスがタイムスリットの前に入ると非表示になる

Question

人が誤って マウスをメニューの外に動かすと、ドロップダウンメニューに機能する遅延を追加しようとしている。私はここに多くの解決策を試しましたが、それらのうちでは シームが機能しません。

編集：[OK]を、これは私がなってしまったものです5

$(function() { 
      var slideDownTime = 400; 
      var firstRun = true; 

      var $menu = $('#menu'), 
      $submenus = $menu.find('ul'), 
      $items = $menu.find('li'), 
      hide = function ($el, $instantHide) { 
       if (!firstRun) { 
        if (!$instantHide) { 
         // force the menu item to show. 
         $el.css({ visibility: "visible", display: "block" }); 

         var hideMenuId = setTimeout(function() { 
          $el.hide().css('visibility', 'hidden'); 
         }, 5000); 

         $el.data('hideMenuId', hideMenuId); 
        } else { 
         $el.hide().css('visibility', 'hidden'); 
        } 
       } else { 
        $el.hide().css('visibility', 'hidden'); 
       } 
      }, 
      show = function ($el) { 
       clearTimeout($el.data('hideMenuId')); 
       $el.css('visibility', 'visible').stop(1, 1).slideDown(slideDownTime); 

       hide($el.parent().siblings().find("ul"), true); // <-- this line hides the other submenus if hovered. 

       var singleLevel = $el.parent().find("ul > li:not(:has(ul)) > a"); 
       singleLevel.hover(function() { 
        hide($(this).closest("ul").children('li').not(this).find("ul"), true); 
       }, function() { 
       }); 

       firstRun = false; 
      }; 

      $menu.focusout(hide($submenus)); 
      $items.hover(function() { 
       show($(this).children('ul')); 
      }, function() { 
       hide($(this).children('ul'), false); 
      }); 

      // find the root elemement level with no children. 
      $menu.find("> li a").not("ul li ul a").not("li:has(ul) > a").hover(function() { 
        //hide the unwantend menu items. 
        hide($(this).closest("ul").children('li').not(this).find("ul"), true); 
      }, function() { 
      }); 

}); 

：ここ はjsfiddle for a complite example

編集へのリンクです。 これは少ないコードで行うことはできませんか？

編集：6 jsfiddleリンクが最新の検証に更新されるようになりました。

Answer 1

focusout()をdelay()としてみてください。また、私はあなたがすべてif elseロジックを必要とは思わない。すべてのサブメニューは<ul>の子$('#menu')であり、同時に子は<li>です。したがって、jQueryオブジェクトをパラメータとして受け入れるメニューを表示または非表示する関数を簡単に作成できます。あなたのHTMLコードがなければ、私は確かに言うことはできませんが、このようなものはうまくいくはずです。あなたのニーズに適応してください。

var $menu = $('#menu'), // Assuming this is a `<ul>` 
    $submenus = $menu.find('ul'), 
    $items = $menu.find('li'), 
    hide = function($el){ 
     $el.delay(500).hide().css('visibility', 'hidden'); 
    }, 
    show = function($el){ 
     $el.css('visibility', 'visible').stop(1, 1).slideDown(); 
    }; 

$menu.focusout(hide($submenus)); 
$items.hover(function(){ 
    show($(this).children('ul')); 
}, function(){ 
    hide($(this).children('ul')); 
}); 

また、この：

element.is(':visible') 

Answer 2

がhoverIntentプラグインを見てみましょう：

element.css('visibility') != "visible" && element.css('display') != "block" 

は同じです。あなたが行う必要がありますすべては、それを含めると、あなたはjsfiddleに例を置くことができます

http://cherne.net/brian/resources/jquery.hoverIntent.html