JQuery: Erkennen Sie, wann Maus mehrere Elemente hinterlässt

Question

Ich habe ein Menü aus Divs, und einer der Divs hat eine JQuery -Mouseger -Funktion, die einen Dropdown -Unternehmen herunterschlägt:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

Ich habe auch eine Funktion, die die Dropdown -Wiederaufnahme der Maus gleitet, hinterlässt den Dropdown:

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

Dies wäre in Ordnung, außer dass, wenn der Benutzer die Maus über den Launcher bewegt, als wieder draußen, ohne die Dropdown -Liste durchzugehen, das Menü sinkt.

Ist es möglich zu überprüfen, ob sich die Maus in einem der Divs befindet?

Bearbeiten 1: Markup:

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>

Answer 1

Nun, dieser Weg ist ziemlich fehlerhaft ... Öffnen Sie jedes Menü (z. B. Ihr Browsermenü) und verschieben Sie die Maus - es ist nicht versteckt. Das ist normal. Wenn Sie irgendwo an irgendwo klicken, ist das Menü versteckt (so können Sie den Event -Handler auf Dokument anhängen). Auch wenn Sie zum Untermenü gehen, wird es angezeigt, wenn die Maus darüber hinweg ist, und ist versteckt, wenn Sie die Maus in einen anderen Menüpunkt verschieben. Wenn Sie die Maus jedoch aus dem Menü verschieben, ist Untermenü nicht versteckt.

Wenn Sie Ihre Idee weiterhin implementieren möchten, müssen Sie komplexes System implementieren, um Benutzeraktionen zu kontrollieren. Fügen Sie Mouseleave -Handler zum Dropdownlauncher hinzu, registrieren Sie den Benutzer, das dieses Element verlassen hat und das Dropdown -Menü auslöst. In der Funktion, die das Dropdown -Menü verbirgt, überprüfen Sie, ob das Maus über das Dropdown -Menü ist - Abbrechen versteckt. Ansonsten verstecken Sie es. Vergessen Sie nicht, den Zustand dieser Variablen zu reinigen ("linker Dropdownlauncher"). Zum Beispiel können Sie das Dropdown -Menü in 1 Sekunde ausführen, nachdem der Benutzer der Launcher verlassen hat.

Seien Sie auch vorsichtig, wenn der Benutzer Maus ziemlich schnell bewegt (nur zuckt), hat Browser keine Zeit, um einige Ereignisse auszulösen (ich hatte Probleme mit Mousemove) ... stellen Sie sicher, dass Sie diesen Fall testen.

Nun, kein Code angehängt, aber ich hoffe, dass Sie die Idee haben.

AKTUALISIEREN: Wahrscheinlich interessieren Sie sich nicht mehr für diese Frage (Antwort kommt so spät, also verstehe ich;), aber ich habe eine sehr interessante Lösung gefunden, leicht zu unterstützen:

Klicken Sie auf Beispiele

Öffnen Sie diese Seite, es gibt Menü. Dies ist das, was Sie implementieren möchten (ich meine das gleiche Verhalten der Menünavigation). Nachdem ich mich JavaScript Code angesehen hatte, bemerkte ich, dass er sehr klein ist, und noch mehr, es hängt nicht mit diesem Menü zusammen ... also war es mir klar, dass sie reine HTML+CSS verwenden, um ihn auszuführen. Schauen Sie sich einfach klein an CSS -Datei, und werfen Sie auch ein Aussehen und ein Menü HTML -Markup:

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

Alles andere wird von CSS gemacht (speziell von: Hover Pseudo-Klasse). Ich mochte diesen Ansatz. Also jetzt haben Sie zumindest Alternative;)