jQuery MouseOut 延迟异常

Question

所以使用 Bootstrap 3.x 作为新客户 WordPress 主题的基础。他们想要水平子菜单。使用一些大型菜单 css 技术可以做到这一点，但是我发现当您不再悬停时它们消失时，很难到达远处的子菜单项。所以我切换到一个简单的 jQuery/CSS 延迟，让子菜单在鼠标移开后保持可见一秒钟。

如果您只想将鼠标悬停在页面上，然后再下到页面的其余部分，则效果很好；但是在两个父菜单项之间来回切换时会出现问题。

我想知道如何为这种情况设置一个例外，或者以更好的方式重写我所拥有的。

这是我目前所做的：JSFIDDLE EXAMPLE

(function($) { 
$(document).ready(function()
                  {
                      $('li.dropdown').hover(function(){
                          var timer = $(this).data('timer');
                          if(timer) clearTimeout(timer);
                          $(this).addClass('over');
                      },function(){
                          var li = $(this);
                          li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 1000));
                      });
                  });
})(jQuery);

感谢任何帮助或建议。

Answer 1

handlerIn时可以清除所有over类。

    (function($) { 
        $(document).ready(function()
                          {
                              var $dropdowns = $('li.dropdown');
                              $dropdowns.hover(function(){
                                  var timer = $(this).data('timer');
                                  if(timer) clearTimeout(timer);
                                  $dropdowns.removeClass('over');
                                  $(this).addClass('over');
                              },function(){
                                  var li = $(this);
                                  li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 1000));
                              });
                          });
    })(jQuery);