jQuery Menü gebrochen, wenn zwischen Listenelementen bewegt

Question

Ich habe ein benutzerdefiniertes jQuery horizontales Menü mit Drop-downs erstellt. Zunächst verblasste es nur ein Untermenü in, wenn sie auf ein Listenelement schwebt, und verblasste es aus, wenn weg bewegt.

Allerdings möchte ich einen Effekt zu schaffen, wo, wenn Sie die Maus aus dem Untermenü bewegen, es verschwindet nicht sofort (zum Beispiel, wenn Sie durch eine Pixelüberschwingens es). Ich war bewusst, das hoverIntent Plugin in einer früheren Frage gestellt, aber es hat eine ärgerliche Verzögerung, wenn Geschwisteruntermenüs öffnen. Also begann ich von Grund auf mit meiner eigenen Funktionalität im Auge behalten.

Meine HTML ist eine Standard-verschachtelte Liste, ul # Menü> li> ul> li. Mein Javascript ist wie folgt:

var menuVisible = false;
var cancelTimeout = false;

$(document).ready(function(){
  $('ul#menu > li').hover(
    function(){
      menuMouseOver( $(this) );
    },
    function(){
      menuMouseOut( $(this) );
    }  
  );
});

function menuMouseOver( $li )
{
  // if one of the menus is down, check which one we're hovering
  if ( menuVisible ) {
    cancelTimeout = true;  
    if ( $li.find('>ul').css('display') == 'block' ) {
      // do nothing if we're hovering over current menu
    }
    else {
      // turn off all menus
      $li.parent().find('>li').each( function() {
        menuOff( $li )
      });
    }
  }

  menuOn( $li );
  menuVisible = true;
}

function menuMouseOut( $li )
{
  setTimeout( 
    function(){
      if ( !cancelTimeout ) {
        menuOff( $li );
        menuVisible = false;
      }
      cancelTimeout = false;
    },
    2000
  );

}

function menuOn( $li )
{
  $li.css('background-position', 'left bottom');
  $li.find('>ul').fadeIn('fast');
}
function menuOff( $li )
{
  $li.css('background-position', 'left top');
  $li.find('>ul').fadeOut('fast');
}

Die folgenden Dinge funktionieren:

• Umzug über einen Top-Level-li öffnet das Untermenü.
• weg bewegt von dem Untermenü schließt es nach 2 Sekunden (für Testzwecke, wird in der Endfassung reduziert werden).
• weg bewegt von dem Untermenü und wieder bricht die Timeout und somit stoppt das Menü verschwinden

Allerdings sind diese nicht funktionieren:

• Beim Übergang von einer Top-Level-Liste Elemente zum nächsten bewegt, wird die vorherige Untermenü nicht verschwindet. Ich will es sofort verblassen, ohne die normale Verzögerung.
• Wenn ich auf zwei Top-Level-Listenelemente bewegen, wird menuVisible auf false, die Schrauben das System ein. Dies liegt daran, cancelTimeout auf true gesetzt ist, wenn Sie über den ersten Geschwister bewegen, und es ist immer noch wahr, wie Sie auf die zweite Geschwister bewegen.

Ich würde schätzen jeden Einblick, warum dies geschieht, und natürlich, wie man es beheben.

Answer 1

Haben Sie die Superfish Menü jQuery-Plugin?

ich es in meinem Projekt verwendet habe, und ich denke, es wird diese Probleme zu lösen für Sie.