Plusieurs Menu Déroulant un seul script en jquery

Bonjour,

Informations :
Je suis en train de faire une site Web. Le site Web possède plusieurs liens. J'ai opter pour des menus déroulant pour mon menu de gauche. J'ai fait mes menu en Jquery avec l'effet slideDown et slideUp, hide et show.

Je peux générer un script jquery pour chaque menu déroulant avec une boucle While en php qui liste tous mes liens et mes menus déroulant fonctionne. Je cherche à optimiser mon code pour n'avoir qu'un script jquery intelligent.

Je vous montre :

Mes sous liens dans le menu déroulant sont invisible au départ (hide) (".menu").hide etc. (avec une class html je peux facilement cacher tous mes éléments avec une ligne de code)

Quand il y a un clic sur un lien je récupère l'id du lien qui m'informe du menu déroulant à afficher. Chaque lien possède un id différent qui lui est donner avec une variable incrémenter dans ma boucle ( lien1, lien2, lien3). Parfait !

Il me reste à afficher le menu déroulant lier au lien sélectionner. Voilà le problème.

Les menus déroulant possède une attribut class='menuderoulant' et ne possède aucun id unique.

Je voudrais savoir si il est possible de faire un "chemin" pour afficher le menu déroulant.

par exemple :


$(#lien1.menuderoulant).slideDown('slow');

je passe par le lien sélectionner ( ici le lien1 ) et j'afficherais le menu déroulant (.menuderoulant) du lien1 Mais je ne sais pas si on peut faire un chemin comme ça en jquery. Habituellement sans chemin on fait tout simplement :

$("#menuderoulant1").slideDown('slow'); et mon menu s'afficherait. Mais dans mon cas j'ai besoin qu'il suive un chemin.. un id et ensuite une class.

Je sais pas si vous allez comprendre x) ....

J'ai décider de faire comme un explode (split) pour récupérer le nombre du lien en php pour regler le problème :

Mes id = lien_1, lien_2
je récupère le nombre = 1, 2
j'affiche le menudéroulant = #sousliste1, #sousliste2

$(document).ready(function(){
											$(".dossiersous").hide();
											$(".dossierlien").click(function(event)
											{
												
												var lien = event.target.id;
												var tablien = lien.split("_");
												var a = tablien[1];
											
												if ($("#sousliste"+a).is(":hidden"))
												{
													$("#sousliste"+a).slideDown('slow');
													document.getElementById('plustxt'+a).innerHTML='[-]';
												}
												else
												{
													$("#sousliste"+a).slideUp('slow');
													document.getElementById('plustxt'+a).innerHTML='[+]';
												}
											});
										});
										

edit : pas oublier de mettre event dans function(event) pour la compatibilité sur tous les navigateurs
Modifié par jackdaniel (29 Jul 2011 - 20:04)