jquery懸停meny延遲隱藏mouseleave，但停止隱藏，如果鼠標進入時間限制

Question

我試圖添加一個延遲，在我的下拉菜單上工作，如果人員misstakly 移動鼠標的菜單之外。我已經嘗試了很多解決方案，但在這裏找不到其中的工作縫。

編輯： 這裏是鏈接到jsfiddle for a complite example

編輯：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() { 
      }); 

}); 

確定這就是我結束了。 但這不能用較少的代碼？

編輯：6 jsfiddle鏈接現在更新爲最新版本。

Answer 1

嘗試使用focusout()與delay()。另外，我不認爲你需要所有的if else邏輯。每個子菜單都是$('#menu')的<ul>子項，同時也是<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.css('visibility') != "visible" && element.css('display') != "block" 

是一樣的：

element.is(':visible') 

Answer 2

看看hoverIntent插件。所有你需要做的是包括它和改變

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