jQuery MouseOut延迟异常

Question

因此，在新客户端的WordPress主题的基础上使用Bootstrap 3.x。他们想要水平子菜单。使用一些超级菜单css技术可以工作，但当你不再徘徊时，我发现很难找到远远的子菜单项目。因此，我切换到了一个简单的jQuery/CSS延迟，使子菜单在鼠标移动后仅停留一秒钟。

如果您只是停留在页面的其余部分，那么它是很好的；但是当在两个父菜单项之间来回切换时，出现了一个问题。

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

以下是我目前所做的：JSFIDDLE示例

(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

您可以在over时清除所有handlerIn类。

    (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);