Discussion :

[dedel53]

Bonjour

Je me permets de vous solliciter car j'ai un petit soucis que je n'arrive pas à résoudre. Voilà je souhaite avoir un menu à 3 niveaux. Pour le niveau 2 j'ai une puce qui change si le menu est ouvert ou pas. Si jamais un sous menu ne comporte pas d'enfants (de sous sous menu) je ne souhaite pas que la puce change.

Cela j'ai réussi à le faire mais je n'arrive pas à faire la chose suivante: si je clique sur un sous menu puis sur un autre, je voudrais que le premier sous menu ouvert se ferme et que le deuxieme s'ouvre

Pourriez vous m'aider??

voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
$(document).ready( function () {
    // On cache les sous-menus :
    $(".first ul.ss_rubrique").hide();
	$(".ss_rubrique ul.article").hide();
 
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".first li.toggleSubMenu > span").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.ss_rubrique:visible").length != 0) {
            $(this).next("ul.ss_rubrique").slideUp("high");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".first ul.ss_rubrique").slideUp("high");
            $(this).next("ul.ss_rubrique").slideDown("high");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });
 
	// On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".ss_rubrique li.toggleSubSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
 
 
        if ($(this).next("ul.article:visible").length != 0) {
            $(this).next("ul.article").slideUp("high");
			$(this).parent().removeClass("opened").addClass("closed");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else  if ($(this).parent().find("li").length != 0) {
            $(".ss_rubrique ul.artcile").slideUp("high");
            $(this).next("ul.article").slideDown("high");
			$(this).parent().removeClass("closed").addClass("opened");
        }
 
		// On empêche le navigateur de suivre le lien :
        return false;
    });    
 
 
} ) ;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<li class="general fond_rouge toggleSubMenu"><span><a href="#">Présentation</a></span>
            <ul class="ss_rubrique">
                    <li class="closed toggleSubSubMenu">
                        <a href="#">Sous rubrique 1</a>
                            <ul class="article">
                                <li class="leaf">
                                    <a href="#">Article 1</a>
                                </li>
                                <li class="leaf">
                                    <a href="#">Article 2</a>
                                </li>
                                <li class="leaf">
                                    <a href="#">Article 3</a>
                                </li>
                            </ul>
                    </li>
                    <li class="closed toggleSubSubMenu">
                        <a href="#">Sous rubrique 2: cas d’un titre long</a>
                    </li>
                    <li class="closed toggleSubSubMenu">
                        <a href="#">Sous rubrique 3</a>
                            <ul class="article">
                                <li class="leaf">
                                    <a href="#" class="selected">Article actif</a>
                                </li>
                                <li class="leaf">
                                    <a href="#">Article 2</a>
                                </li>
                            </ul>
                    </li>
                    <li class="closed toggleSubSubMenu">
                        <a href="#">Sous rubrique 3 au survol</a>
                    </li>
                </ul>
        </li>

merci de votre aide

[danielhagnoul]

Bonsoir.

Je ne vois aucun problème, après avoir corrigé une toute petite faute :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".ss_rubrique li.toggleSubSubMenu > a").click(function(){
	// Si le sous-menu était déjà ouvert, on le referme :
	
	if ($(this).next("ul.article:visible").length != 0) {
		$(this).next("ul.article").slideUp("high");
		$(this).parent().removeClass("opened").addClass("closed");
	} else if ($(this).parent().find("li").length != 0) {
		// Si le sous-menu est caché, on ferme les autres et on l'affiche :
		$(".ss_rubrique ul.article").slideUp("high");
		$(this).next("ul.article").slideDown("high");
		$(this).parent().removeClass("closed").addClass("opened");
	}
	
	// On empêche le navigateur de suivre le lien :
	return false;
});