JQuery: détecter le moment où la souris laisse plusieurs éléments

Question

J'ai un menu en divs, et l'un des divs a une fonction de mouseenter jquery qui glisse vers le bas une liste déroulante:

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

J'ai également une fonction qui glisse le dos déroulant en haut des feuilles de souris le menu déroulant:

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

Ce serait bien, sauf que lorsque l'utilisateur déplace la souris sur le lanceur, que de nouveau, sans passer par le menu déroulant, les séjours de menu déroulant.

Est-il possible de vérifier si la souris est dans l'une des divs?

EDIT 1: Marquage:

<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

Eh bien, cette façon est assez bogué ... ouvrir un menu (par exemple votre menu du navigateur), et déplacer la souris - il n'est pas caché. Ceci est de façon normale. Lorsque vous cliquez sur quelque part puis le menu est caché (vous pouvez joindre gestionnaire d'événements, cliquez sur le document). Même quand vous allez au sous-menu, il apparaît lorsque la souris est dessus, et se cache lorsque vous déplacez la souris à un autre élément de menu; mais lorsque vous déplacez la souris sur le menu, sous-menu est pas caché.

Si vous voulez toujours mettre en œuvre votre idée, vous aurez besoin de mettre en œuvre le système complexe de contrôle des actions des utilisateurs. Ajouter un gestionnaire mouseleave à dropdownLauncher, inscrivez-vous que l'utilisateur a quitté ce poste et déclencheur menu déroulant se cacher. Maintenant, en fonction qui cache du menu déroulant contrôle si la souris est sur le menu déroulant - annuler cachette; sinon cacher. Ne pas oublier d'état propre de cette variable ( « gauche dropdownLauncher »). Par exemple. vous pouvez exécuter cacher le menu déroulant en 1 seconde après que l'utilisateur a quitté lanceur.

Faites également attention, lorsque la souris se déplace utilisateur assez rapide (seulement saccades), le navigateur n'a pas de temps pour déclencher des événements (j'ai eu des problèmes avec mousemove) ... Assurez-vous que vous testez ce cas.

Eh bien, pas de code attaché, mais j'espère que vous avez l'idée.

Mise à jour: Probablement vous n'êtes pas intéressé par cette question plus (réponse est si tard, donc je comprends;), mais je l'ai trouvé une solution très intéressante, facile à l'appui:

Cliquez Exemples

ouvrir cette page, il y a menu. Comme je l'ai eu, c'est ce que vous voulez mettre en œuvre (je veux dire le même comportement de navigation de menu). Après avoir regardé le code JavaScript j'ai remarqué qu'il est très petit, et plus encore, il est pas lié à ce menu ... Il était clair pour moi, ils utilisent HTML + CSS pur pour l'exécuter. Il suffit de jeter un oeil à petit , et aussi jetez un oeil et le menu balises HTML:

<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>

tout le reste est fait par css (en particulier par: pseudo-classe vol stationnaire). J'ai aimé cette approche. Alors maintenant, vous avez autre, au moins;)