Discussion :

[dharkan]

bonjours,

J'ai un petit problème, je crée un menu accordéon en JQuery lorsque je clique sur un menu le sous-menu se déroule. si ensuite je clique sur un autre sous-menu celui-ci se déroule. Mais je voudrai que le précédent sous-menu se referme cependant l'effet escompté ne se réalise pas. Si je reclique sur le menu le sous-menu se referme et l'autre reste ouvert puis si je referme l'autre il se referme bien.

Voici le code que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('.ouvrir').click(function(){
if ($(this).children('.cache').is(':hidden'))
{
$(this).children('.cache').slideDown('slow');
}
else
{
$('.cache').slideUp('slow');
}
});

[Hijack]

Bonjour dharkan.

Le problème est un algorithme incorrect. Transformons ton code en pseudo-code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('.ouvrir').click(function(){
if ($(this).children('.cache').is(':hidden'))
{
$(this).children('.cache').slideDown('slow');
}
else
{
$('.cache').slideUp('slow');
}
});

Deviens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
Lors du clic sur un élément ayant la classe 'ouvrir'
SI les enfants de cet élément ont l'attribut 'hidden'
FAIRE
       Afficher lentement les enfants de cet élément
FIN SI
SINON (SI les enfants de cet élément n'ont pas l'attribut 'hidden')
FAIRE
        Cacher lentement les éléments ayant la classe 'cache'
FIN SINON

On peut alors remarquer une erreur : il faut cliquer sur un élément de la classe 'ouvrir' qui a ses éléments enfants affichés (qui n'ont pas l'attribut ':hidden') pour cacher tous les éléments qui ont la classe 'cache'. Soit cliquer sur un menu ouvert pour fermer les menu.

Une solution possible serait de toujours cacher les menus puis de n'afficher que celui cliqué :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$('.ouvrir').click(function(){
if ($(this).children('.cache').is(':hidden'))
{
$('.cache').slideUp('slow');
$(this).children('.cache').slideDown('slow');
}
});

Dans l'idée, lorsqu'on clique sur un menu, si le sous-menu est fermé on cache tous les autre menu puis on ouvre celui-ci. Sinon on ne fait rien.
Tu pourrais rajouter un sinon qui fermerais tous les éléments ayant la classe 'cache'.

J'espère ne pas avoir trop développé et avoir répondu à ton problème

[dharkan]

Tout d'abords merci de ta réponse mais aussi de ton développement.

Je me rend compte "que même en javaScript/Jquery" l'élaboration d'un structurogramme est plus qu'utile.

Il est vrai que c'est judicieux de refermer tout les éléments possédant une class 'cache' pour ensuite n'ouvrir que les élément enfant de l'élément sur lequel le clique est activé en l'occurance possédant une class 'ouvrir'.

Grace à ces explications j'ai bien un menu accordéon et rajouter une clause sinon qui referme tout les éléments possédant une class 'cache' dans le cas ou l'attribut n'est pas ':hidden'.

Merci de ta réponse et j'espère que mon raisonnement de ce présent est correct.