jQuery cliquez sur la fonction sur LI ne fonctionne pas dans IE

Question

J'ai un problème qui me rend fou. Je suis un débutant Javascript relatif donc s'il vous plaît soyez gentil :).

J'ai un code existant pour un menu de navigation à gauche qui utilise le plugin Treeview pour jQuery (http://bassistance.de/jquery-plugins/jquery-plugin-treeview/). Pour l'expliquer rapidement, lorsqu'un élément de campagne contient plus d'éléments de ligne, un petit div avec une image (généralement une flèche) sera ajouté à l'élément de campagne et cette petite div est cliquable pour développer les éléments de campagne.

Tout cela est très bien, mais je souhaite maintenant ignorer le petit div et permettre à l'utilisateur de cliquer n'importe où sur l'élément de campagne pour développer les éléments qu'il contient.

Un extrait du code pour le menu:

<div class="page-body-left" id="leftmenu"> 
<ul> 
<li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a> 
<ul style="display: none;"> 
    <li><a class="createlink" href="link1a">link1a</a></li> 
    <li class="last"><a class="createlink" href="link1b">link1b</a></li> 
</ul> 
</li> 

J'ajouté dans ce code pour essayer d'ajouter la fonctionnalité que je voulais dans la fonction document.ready:

jQuery("#leftmenu ul > li.expandable").click(function() { 
    alert("Clicked!"); 
    jQuery(this).children("ul").slideToggle("fast"); 
}); 

Cela a bien fonctionné dans Firefox. Cependant, dans IE6 et IE7 rien ne se passe, même pas l'alerte. Toutefois, si vous cliquez sur le lien lui-même, le comportement est correct (mais bien sûr, mis à part le fait que vous êtes éloigné de la page).

Certaines choses que j'ai essayé sont:

• Emballage ul dans divs de cliquer sur la place, mais ne fonctionne pas.
• Ajout de "jQuery ('# leftmenu ul> li.expandable'). Css ('background-color', 'red');" travaux.
• Extraire la liste du contexte de menu a au moins afficher l'alerte, mais je veux éviter de réécrire la roue et que je veux réutiliser autant de classes insérées Treeview que possible.
• La liaison de la fonction de clic à une div standard fonctionne.

Quelqu'un peut-il voir où je me suis trompé? Est-ce que Treeview joue avec ma fonction de clic? Si oui, qu'est-ce qui cause ça? C'est tellement frustrant que ça marche bien dans Firefox et pas dans IE!

Merci, Jenny

Answer 1

Je ne l'ai pas testé votre code, mais les odeurs comme un bogue dans Sizzle (le sélecteur moteur).

Dans tous les cas; vous n'avez pas besoin de spécifier le chemin complet d'un élément donné. Essayez ceci pour la taille:

"#leftmenu .expandable" 

Sur une note latérale: En général; plus vos sélecteurs sont complexes, plus ils courent lentement.

Answer 2

ouais ressemble à vos sélecteurs. pourquoi pas directement référence à l'élément UL?

<div class="page-body-left" id="leftmenu"> 
<ul id="topmost"> 
    <li class="expandable" style="background-color: red;"><a class="createlink" href="link1">link1</a> 
    <ul style="display: none;"> 
     <li><a class="createlink" href="link1a">link1a</a></li> 
     <li class="last"><a class="createlink" href="link1b">link1b</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 

jQuery:

jQuery("#topmost li.expandable").click(function() { 
     alert("Clicked!"); 
     jQuery(this).children("ul").toggle("fast"); 
}); 

En outre, slideToggle ne fonctionne pas pour moi. donc j'ai changé pour basculer. ça a bien fonctionné.

Answer 3

Merci à vous deux, les sélecteurs étaient en effet le coupable - si je pouvais voter je le ferais mais il ne me laisserait pas :). Parfois, je ne suis pas tout à fait sûr de ce que je fais avec les sélecteurs, car parfois cela fonctionne, mais quand je ne le fais pas, j'essaie toutes sortes d'autres choses.

Je me demande pourquoi il a travaillé dans Firefox mais ...

Il ne fonctionne toujours pas dans IE6 - mais ni fait un peu de l'autre script que je connais des œuvres pour les autres modèles, donc je pense que c'est une autre question .

Merci encore!

Answer 4

J'ai supposé que le lien1 développera un lien1a et b. pourquoi n'essaies-tu pas de le faire comme ça? Ce travail pour moi.

<li li class="expandable" style="background-color: red;"> 
    <a class="createlink" onclick="return false;" href="#">Link1</a> 
    <ul style="display: none;"> 
     <li>....</li> 
     <li>....</li> 
    </ul> 
</li> 

vous avez juste besoin d'ajouter onclick et href = "#", correct?