sur click toggle ul - on cliquez ailleurs hide ul

Question

hey all - mon deuxième jour de tenter jquery sur une tâche au travail, et je suis un peu coincé.

j'ai une liste non ordonnée de liens .. à l'intérieur d'une liste non ordonnée de liens

sur un <li class="headlink"> cliquant, je voudrais enfant du <li class="headlink"><ul> pour devenir visible.

en cliquant loin (n'importe où sur le document), je voudrais que l'enfant <ul> disparaisse.

Par défaut, l'enfant <ul> est masqué dans la feuille de style.

html

<ul id="cssdropdown"> 
    <li><a href="#">A</a></li> 
    <li class="headlink"> 
     <a href="#">B</a> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">C</a></li> 
</ul> 

jquery

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $('#cssdropdown li.headlink').click(
      function() { $('ul', this).toggle("slow"); }); 
    }); 


    $(document).ready(function(){ 
     $('body').click(function() { 
      $('li ul:visible').hide("slow") }) }); 

</script> 

problème - quand je clique sur un <li class="headlink">, je reçois l'effet yoyo, où l'enfant UL apparaît - et se cache.

tout conseil très apprécié.

Answer 1

Vous devez empêcher l'événement de se propager à l'organisme:

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(function(event) { 
     $('ul', this).toggle("slow"); 
     event.stopPropagation(); 
    }); 
}); 

Et pour cacher les éléments courants ouverts:

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(function(event) { 
     $(this).siblings(".headlink").hide("slow"); 
     $('ul', this).toggle("slow"); 
     event.stopPropagation(); 
    }); 
}); 

Answer 2

Cela corrigera le problème de l'effet « yo-yo » : (annuler la propagation)

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(
     function(event) { 
      $('ul', this).toggle("slow"); 
      event.stopPropagation() 
     }); 
});