sélecteur jquery pour différentes instances de la même classe

Question

Je ne sais pas si le titre est tout à propos ...... mais voici ma situation .... J'ai une classe appelée compte-gouttes et une autre classe drop_list .. .Ces deux sont des sous-classes de la drop_head de classe, le drop_list doit descendre chaque fois que le compte-gouttes est cliqué ...

---

  <div class="drop_head"> 
       <div class="dropper"> Content-1</divr> 
       <div class="drop_list"> List-1</div> 
      </div> 
      <div class="drop_head"> 
       <div class="dropper"> Content-2</divr> 
       <div class="drop_list"> List-2</div> 
      </div> 

---

lorsque le contenu-1 est cliqué sur la liste-1 doit bascule et quand le contenu-2 est cliqué sur la liste-2 doit dérouler ... comment puis-je réaliser cela en utilisant une seule jquery .. ?? merci à l'avance ......

Answer 1

Si je vous comprends bien cela devrait être assez simple:

$('.drop_head').each(function(i,e){ 
    $('.dropper', e).click(function(){ 
     $('.drop_list', e).slideToggle(); 
    }); 
}); 

en utilisant le .drop_head comme le contexte de la liste et l'élément cliquable vous ne devez utiliser id. En outre, si vous omettez une liste ou un compte-gouttes par accident, il ne fera que bousiller ce "widget" et ne fera pas l'effet des autres, ce qui ne serait pas le cas avec closest.

Answer 2

vous avez deux voies (que je vois =))
-Juste donner deux noms d'identification différents à vos couples liste déroulante/Dopper

<div class="dropper" id="id_1"> Content-1</divr> 
      <div class="drop_list" id="id_1"> List-1</div> 
<div class="dropper" id="id_2"> Content-2</divr> 
      <div class="drop_list" id="id_2"> List-2</div> 

puis dire quelque chose comme:

$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")}) 

ou moins:

$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()}) 

Hope it helps
Luca