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

您可以在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);

jQuery MouseOut延迟异常

1 个答案: