jQuery MouseOut Delay Exception

Question

So using Bootstrap 3.x for the base of a new client's WordPress theme. They want horizontal sub-menus. Got that working using some mega-menu css techniques, but I found it very difficult to get to far sub-menu items when they disappear as soon as you are no longer hovered. So I switched to a simple jQuery/CSS delay for the sub-menu's to stay visible for just a second after your mouse moves off.

It works great if you're going to just hover over then go down to the rest of the page; but a problem arrises when switching back and forth between two parent-menu items.

I was wondering how I could set up an exception for that case, or perhaps rewrite what I have in a better way.

Here's what I have going so far: 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);

I appreciate any help or advice.

Answer 1

You can clear all over classes when 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);