Как использовать $ .hoverIntent и setTimeout вместе?

Question

Я использую плагин hoverIntent для моего горизонтального раскрывающегося меню навигации, так как я хочу несколько миллисекундных задержек перед открытием подменю, связанного с текущим основным меню. Также у меня есть требование, чтобы открытое меню не закрывалось немедленно, когда пользователь перемещал указатель мыши в открывшемся меню.

Fiddle ссылка: 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 миллисекундную задержку перед закрытием подменю. Но если пользователь перемещает курсор из 1-го главного меню во второе главное меню; то я хочу немедленно закрыть 1-е подменю и не хочу показывать 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); 
});