jQuery - Cliquez sur LI, afficher/masquer UL - Cliquer sur LI: un href, continuer à afficher UL et ouvrir dans la fenêtre vide

Question

Merci aux merveilleux contributeurs de SO! jQuery est beaucoup plus cool quand vous commencez à le comprendre. :)

J'ai donc un LI qui, lorsqu'on clique dessus, affiche/cache une UL enfant. Ce que je voudrais faire, c'est avoir la possibilité de cliquer sur un lien à l'intérieur de la LI qui ouvre une fenêtre vide, mais ne ferme pas non plus l'UL de l'enfant. L'ouverture de fenêtre vide se fait

a[href^="http://"]').attr("target", "_blank"); 

cependant, je ne suis pas sûr de savoir comment « revenir: false » sur la LI il ne ferme pas la UL lorsque la fenêtre vide s'ouvre. Je veux que l'utilisateur puisse voir l'UL sur laquelle ils étaient quand ils ferment la fenêtre vide.

Si ce n'est pas clair, s'il vous plaît faites le moi savoir.

Merci!

Answer 1

Je pense que ce que vous cherchez est probablement event.stopPropagation()

est ici la documentation: http://api.jquery.com/event.stopPropagation/

Fondamentalement, ce qui se passe est que lorsque vous cliquez sur le <a>, l'événement click déclenche, mais comme il est contenu dans le <li>, l'événement click est également déclenché. Ce processus de l'événement allant d'un enfant à l'autre est appelé événement bouillonnant. Vous pouvez utiliser event.stopPropagation() pour l'arrêter.

Supposons que vous avez une structure HTML comme ceci:

<ul> 
    <li class="reveal">One<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
    <li class="reveal">Two<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
    <li class="reveal">Three<br /> 
     <a href="http://www.google.com" target="_blank">Google</a> 
      <ul> 
       <li>a</li> 
       <li>b</li> 
       <li>c</li> 
     </ul> 
    </li> 
</ul> 

De plus, nous allons dire que vous avez une règle CSS:

ul ul { display: none; } 

Appliquer cette jQuery, et vous devriez obtenir la résultat que vous êtes à la recherche:

$(function() { 
    $('.reveal').click(function() { 
     $(this).children('ul').slideToggle(); 
    }); 

    $('.reveal a').click(function(event) { 
     event.stopPropagation(); 
    }); 
}); 

Voici une démonstration en direct de cette en action: http://jsfiddle.net/PaxTg/

Answer 2

vous voudrez peut-être regarder event orders puis arrêter la propagation de votre événement au bon moment.