如何一起使用$ .hoverIntent和setTimeout？

Question

我正在使用hoverIntent插件作爲我的水平下拉導航菜單，因爲我想在打開與當前主菜單關聯的子菜單之前幾毫秒的延遲。此外，我還要求在用戶將鼠標指針從當前打開的菜單移開時，打開的菜單不應立即關閉。

小提琴鏈接：https://jsfiddle.net/vijayP/tbg2x5h7/6/

於是我想出了下面的代碼：

$(document).ready(function(){ 

    var config = { 
      over: function() { 
       $(this).addClass("show"); 
      }, 
      timeout: 300, 
      out: function() { 
       var _this = $(this); 
       setTimeout(function() { 
        $(_this).removeClass("show"); 
       }, 300); 

      } 
     }; 
    $("ul.drop_menu li").hoverIntent(config); 
}); 

這裏的菜單是越來越開（添加show類）後300 millsec。並徘徊; 300毫秒的延遲已被添加，以避免突然關閉菜單。此代碼正常工作沒有問題。我正在觀察的問題是：

問題：如果用戶離開菜單，那麼在關閉子菜單前我需要300毫秒的延遲時間。但是如果用戶從第一主菜單移動光標到第二主菜單，那麼我想立即關閉第一個子菜單，並且不想顯示出2個子菜單​​相互重疊。在小提琴中，您可以在第一主菜單中看到這種重疊效果，並進入第二主菜單。

Answer 1

當您將鼠標懸停在li元素上時，您可以從同級中刪除show類。看到更新的jsfiddle https://jsfiddle.net/tbg2x5h7/7/

$(document).ready(function(){ 

    var config = { 
      over: function() { 
       $(this).siblings().removeClass("show"); 
       $(this).addClass("show"); 
      }, 
      timeout: 300, 
      out: function() { 
       var _this = $(this); 
       setTimeout(function() { 
        $(_this).removeClass("show"); 
       }, 300); 

      } 
     }; 
    $("ul.drop_menu li").hoverIntent(config); 
});