JQuery question de sélection (je pense)

Question

J'ai le script ci-dessous

<script type="text/javascript"> 
    $(document).ready(function() { 
     var ChildMenusFound = $(".menu_Child").hover(function() { 
      //Mouse Over 
          alert('ok'); 
      $(this).toggleClass("menu_hover"); 
     }, function() { 
      //Mouse Out 
          alert('ok'); 
      $(this).toggleClass("menu_hover"); 
     }); 
    }); 
</Script> 

Le html je suis sortie est la suivante:

<ul alt="" class="menu_Root"> 
<li class="menu_Child>" 
<a href="/Admin" alt="">Admin</a> 
<ul alt="" class="menu_Child"> 
<li class="menu_SubMenu>" 
<a href="/Admin/Statistics" alt="">Statistics</a></li> 
<li class="menu_SubMenu>" 
<a href="/Admin/Database" alt="">Database</a></li> 
</ul></li> 

<li class="menu_Child>" 
<a href="/MyAccount" alt="">My Account</a> 
<ul alt="" class="menu_Child"> 
<li class="menu_SubMenu>" 
<a href="/MyAccount/Profile" alt="">Profile</a></li> 
</ul></li> 

</ul> 

après l'appel à vol stationnaire(), ChildMenusFound contient 2 éléments, firefox ne montre aucune erreur JS, pourtant mouseover/hors des éléments li ne provoque rien.

Quelqu'un peut-il identifier mon erreur?

Answer 1

Votre balisage est cassé. Vous avez des guillemets en dehors des tags. Il semble aussi que vous manquiez un </li> quelque part pour ce premier </li> mais c'est difficile à dire.

Answer 2

Votre HTML est un peu loin, vous avez des classes non fermées (ou mal fermées) comme celui-ci:

<li class="menu_Child>" 
        ^here 

Il devrait être:

<li class="menu_Child"> 

Here's the fixed/working version, vous pouvez mince votre code vers le bas si , comme ceci:

$(function() { 
    $(".menu_Child").hover(function() { 
    $(this).toggleClass("menu_hover"); 
    }); 
}); 

Avec un rappel passé à .hover() il est cal conduit dans les deux directions in/out, et puisque vous êtes en train de basculer, vous pouvez enregistrer le code ici.

Answer 3

D'autres réponses ont noté votre balisage HTML cassé.

Une chose à considérer peut être d'utiliser CSS au lieu de javascript pour faire votre hover. Il ne fonctionnera pas dans IE6 à moins qu'il ne soit sur un élément <a>, mais il le sera dans la plupart des autres navigateurs.

.menu_Child { 
    background: yellow; 
} 

.menu_Child:hover { 
    background: orange; 
} 

Je ne sais pas ce que l'effet est que vous allez pour, mais si vous pouvez changer l'élément plané au <a>, cela fonctionnera dans IE6 aussi bien.

Answer 4

Attention, vous avez inversé deux personnages:

<li class="menu_Child>" 

besoins de est devenu

<li class="menu_Child">