Bonjour,

Je fais un slideToggle sur un menu, lors du clique sur un menu, je veux que la liste apparaissait, et l'autre disparaissait, voila le code:

$(".arrowDown").click(function () {
    var index = $(".arrowDown").index(this);
	//console.log(index);
	$('.displayMenu:eq(' + index +')').slideToggle();

alors le code HTML:

<span style="float:left">
<img src="Images/Icons/fleche_bas.png" class="arrowDown" align="absmiddle">
<ul class="displayMenu" id="1">
<li>option1</li>
<li>option2</li>
<li>option3</li>
</ul>
</span>

<span style="float:left">
<img src="Images/Icons/fleche_bas.png" class="arrowDown" align="absmiddle">
<ul class="displayMenu" id="2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</span>

merci

Salut rimie,
loin de moi l'idée d'être désagréable, mais je commence à penser que décidément, tu n'apprends pas de ce qui t'est transmis sur ce forum.

Ta question est floue, les éléments de bases insuffisants et tu ne le réalises même pas. J'ai idée que tu as basé ton code sur Jquery, mais ça, ce n'est que par expérience personnelle et je n'ai absolument aucune certitude en la matière : comment veux-tu qu'on sache que c'est bien ça ou pas ? Si tu ne donnes qu'une partie des éléments, personne, pas même un super-gourou du Javascript, ne pourra t'aider à résoudre ton problème. Apprends donc à poser les bonnes questions. Ça veut donc dire, apprends à comprendre ce qui ne fonctionne pas, et donc apprends à distinguer dans l'ensemble de ton code quels sont les éléments mis en oeuvre qui ne donnent pas le résultat attendu.

Dans le cas présent, tu fais référence à une fonction slideToggle() : mais dans le code que tu montres, on ne voit pas les détails de cette fonction, or il est absolument certain que ce n'est pas une fonction native du langage : partant de là, à ton avis, combien de personne sur... cette planète seront capable de te donner une réponse intelligente ? À mon sens aucune, mais j'aimerais beaucoup que tu me démontres que tous les éléments nécessaires sont pourtant bien présents.

Une question bien posée, c'est un problème bien compris, ça représente les 3/4 de la réponse.

merci Cyrano pour votre compliment, je me reexplique mon probleme de code:

J'ai des menus sous forme de ul et li avec des id differents:

<div>cliquer moi</div>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

<div>cliquer moi</div>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

le fait d'avoir 'cliquer moi' repetitifs, c'est que je les filtre de puis une BDD, je prends les menus et leurs sous-menus, quand je clique par exemple sur le premier element 'cliquer moi' son menu apparaissait, et quand je clique sur le 2eme element 'cliquer moi', je veux que le premier element disparaissait et le 2eme recement clique apparaissait, c'est comme sur facebook.

sur ceux, j'utilise slideToggle, avec cette fonction:

$(".arrowDown").click(function () { // quand je clique sur 'cliquer moi' qui a comme class arrowDown
    var index = $(".arrowDown").index(this); // je dois avoir son index
        //console.log(index);
        $('.displayMenu:eq(' + index +')').slideToggle(); // et je dois afficher le menu de l'index de l'element clique
 

si je ne precise pas l'index de quel element clique pour afficher ses menus, j'aurais un resultat que lors du clique tous les menus seront affiches, alors par contre je veux afficher celui qui a ete bien clique et cacher les autres s'ils sont actif (deja cliques).

j'espere que je suis un peu bien clair ici

merci

Mouais, si on veut : mais en fait, le code HTML que tu montres n'est pas en accord avec le code JavaScript qui suit : tu fais références par exemple à une classe « arrowdown » absente des éléments HTML... donc déjà sur ce code, tes fonctions JavaScript n'auront aucun effet...

le voila:

<div class="arrowDown">cliquer moi</div>
<ul class="displayMenu" id="1">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

<div class="arrowDown">cliquer moi</div>
<ul class="displayMenu" id="2">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

 

Ok, là c'est déjà plus logique : ce qui manque maintenant, c'est le résultat obtenu. J'ai quelques raisons de penser que justement, il ne se passe rien : as-tu tu des messages d'erreur ? Éventuellement dans la partie console de Firebug, tu aurais des éléments pour voir ce qui cloche, as-tu regardé ?

Ok, là c'est déjà plus logique : ce qui manque maintenant, c'est le résultat obtenu. J'ai quelques raisons de penser que justement, il ne se passe rien : as-tu tu des messages d'erreur ? Éventuellement dans la partie console de Firebug, tu aurais des éléments pour voir ce qui cloche, as-tu regardé ?

il n'y a aucune erreur, mais juste l'action souhaitable ne se passe pas, alors quand je clique sur 'cliquer moi', le menu apparaissait, alors quand je vais vers une autre pour la cliquer le menu apparaissait sans la disparition du premier.

J'ai jeté un rapide coup d’œil dans la doc et à mon avis, tu attends quelque chose qui n'a pas lieu d'être. slideToggle va alterner les effets sur un élément donné mais ne sera pas affecté par les évènements d'autres éléments. En clair, l'effet sera appliqué au lien A, puis au lien B, mais en cliquant sur B, ça n'affectera pas le lien A et inversement.

Ça veut dire qu'il serait préférable de t'écrire un petit plugin pour faire ce que tu veux avec l'effet désiré.

donc vaut mieux utiliser show() / hide()

donc vaut mieux utiliser show() / hide()

Non, c'est déjà ce que fait slideToggle, et ça ne changera rien à ton problème... mais je me demande si tu as bien saisi pourquoi ça ne fait pas ce que tu espérais...

donc vaut mieux utiliser show() / hide()

Non, c'est déjà ce que fait slideToggle, et ça ne changera rien à ton problème... mais je me demande si tu as bien saisi pourquoi ça ne fait pas ce que tu espérais...

oui bien compris, on part vers CSS alors, avec un hover display block et au depart un display none

Pourquoi pas, mais là, j'ai l'impression que tu tentes de contourner pour éviter de devoir plonger dans l'écriture d'un petit bout de code basé sur le principe de slideToggle mais affectant plusieurs éléments d'un groupe. Ce n'est pourtant pas très sorcier.

Idée générale : tu as déjà le départ avec $(".arrowDown").each() qui va identifier tous les liens principaux : lorsque tu vas cliquer sur un élément, au lieu de faire un slideToggle, il faut boucler sur tous les éléments avec la classe displayMenu et les replier sauf celui correspondant au lien cliquer et ouvrir ce dernier, donc effectivement là tu peux utiliser show()/hide() en récupérant le statut de visibilité du groupe traité. Et tu peux à la rigueur garder l'appel de slideToggle qui permettra qu'un menu ouvert soit refermé s'il est ouvert, sans ouvrir les autres pour autant.

je vais essayer avec each() je pense c'est du genre loop

je vais essayer avec each() je pense c'est du genre loop

C'est exactement ça.

Je te recommande vivement d'user et d'abuser de la lecture de la documentation de JQuery, il en existe des versions en français, et il n'y a pas besoin de faire de longues et fastidieuses recherches pour trouver des exemples de code, des tutos et tout ce qu'il faut pour comprendre et assimiler les principes de telle ou telle fonctionnalité de la librairie. Tu gagneras en outre beaucoup de temps à terme en écrivant tes propres plugins pour obtenir très exactement ce que tu veux, d'abord parce que comme pour beaucoup de scripts open source, les 3/4 sont écrits avec les genoux et ne sont même pas documentés, ensuite parce que ça va te permettre d'évoluer considérablement dans l'emploi du JavaScript et te simplifier la vie. Il y a toujours toutes sortes de plugins qui sont malgré tout bien écrits et documentés, mais pas toujours bien diffusés et faciles à trouver pour faire ce dont tu as besoin.

each() va boucler sur les éléments qui correspondent et à chaque tour, tu pourras agir sur l'élément et lui ajouter des actions et autres gestionnaires d'évènements. Là par exemple, par rapport à ce que tu veux faire, je verrais pas obligatoirement un plugin, mais au minimum un gestionnaire d'évènement sur un each et une fonction paramétrée qui va replier tout sauf un élément (correspondant au paramètre.

un petit essai, BUG: si je clique un seul, il disparaissait pas.

$(".arrowDown").each(function () {
            $(this).click(function() {
           	var index = $(".arrowDown").index(this);
			// on loop pour cacher les autres
			$('.displayMenu').hide();
			
			// on fait apparaitre le courant
			$('.displayMenu:eq(' + index +')').slideToggle();
            });
        });