Plusieurs menus déroulants de jquery sur 1 page

Question

Je suis nouveau à jquery et j'essaye de faire une liste déroulante de menu comme sur www.teefury.com (tailles des hommes et des femmes). Je suis venu assez proche mais quand je clique sur 1 des boutons tous les ouverts (ou sur mon deuxième essai seulement le premier). Ainsi mes questions:

• Est-ce que quelqu'un sait un tutoriel que je peux utiliser pour cela?
• Quelle est la meilleure façon d'en créer une seule? (J'ai le html & css prêt)
• Comment est-ce que je fais en sorte que seulement une des listes déroulantes s'ouvrira sur le clic et pas tous ou seulement le premier?

C'est ce que j'ai jusqu'à présent: http://users.telenet.be/ezarto/dropdown/

PS: c'est aussi mon premier stackoverflow, s'il vous plaît me informer de tout ce que je fait de mal :)

PSS: seulement 1 lien hypertexte permis, désolé, mais vous devrez copier/coller l'teefury un

Answer 1

Utilisez cette et tranverse le DOM pour atteindre la liste appropriée que vous essayez d'afficher. J'ai refactorisé votre JavaScript pour le faire.

$(function() { 

$(".dropdown dt a").click(function() { 
    $(this).closest('dt').siblings('dd').find('ul').toggle(); 
}); 

$(".dropdown dd ul li a").click(function() { 
    var text = $(this).text(); 

    $(this).closest('dd').siblings('dt').find('span').text(text); 

    $(this).closest('ul').hide(); 
}); 

});​ 

Answer 2

démo

http://jsfiddle.net/QznH7/

css

.invisible 
{ 
    display:none; 
}​ 

html

<dl> 
     <dt><a class='showMenu' href="javascript:"><span>1</span></a></dt> 
     <dd> 
      <ul class="invisible"> 
       <li><a href="#">a</a></li> 
       <li><a href="#">b</a></li> 
      </ul> 
     </dd> 
</dl> 

<dl> 
     <dt><a class='showMenu' href="javascript:"><span>2</span></a></dt> 
     <dd> 
      <ul class="invisible"> 
       <li><a href="#">a</a></li> 
       <li><a href="#">b</a></li> 
      </ul> 
     </dd> 
    </dl> 

javascript

jQuery(function(){ 
    jQuery('.showMenu').bind('click',function(e){ 
     jQuery(e.target).parents('dl:first').find('ul').toggleClass('invisible') 
    }); 
}); 

Answer 3

Vos menus déroulants ont la même classe dl class="dropdown">

Alors, quand vous le faites par exemple:

$(".dropdown dt a").click(function() { 
    $(".dropdown dd ul").toggle(); 
}); 

Ce qu'il fait sur les deux!

Vous pouvez reconnaître sur lequel vous cliquez. Par exemple, vous pouvez donner à vos listes déroulantes un ID

<dl id="dropdown1"> 

et de modifier votre jQuery en conséquence.