Fermer les éléments d'un menu au click

**pierrot10** · 13/09/2022, 01h11

Bonjour à tous,

J'essaye de contruire mon propre menu à plusieurs niveau.
Il agit en fonction de la class dropdown-toggle

Code jquery :

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

1
2
3
4
5
6
7
8
9
10
11
12
( function( $ ) {
	$( '.dropdown-toggle' ).click( function( e ) {
		var _this = $( this );
		e.preventDefault();
		_this.toggleClass( 'toggle-on' );
		_this.find('.fa').toggleClass( 'fa-angle-down fa-angle-up');
		_this.parent().next( '.sub-menu' ).toggleClass( 'toggled-on' );
		_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
 
	} );
 
})( jQuery );

Code HTML :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
    <section class="container e-panel-row">
 
        <nav role="navigation" aria-label="Main navigation">
 
            <ul class="e-justify-content-space-beween bg-black">
 
                <li class="hasChildren">
                    <div>
                        <a href="#">A propo</a>
                        <a href="#" class="dropdown-toggle" aria-expanded="false">
                            [12]
                            <i class="fa fa-angle-down"></i>
                        </a>
                    </div>
 
                    <ul class="sub-menu" role="group">
                        <li>
                            <div>
                                <a class="link" href="#">Item 1.1</a>
                            </div>
                        </li>
                        <li class="hasChildren">
 
                            <div>
                                <a href="#" class="link">Item 1.2</a>
                                <a href="#" class="dropdown-toggle" aria-expanded="false">
                                    [1]
                                    <i class="fa fa-angle-down"></i>
                                </a>
                            </div>
 
                            <ul class="sub-menu" role="group">
                                <li>
                                    <div>
                                        <a href="#">Item 1.2.1</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Item 1.2.2</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">Item 1.2.3</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div>
                            <a href="#">Item 333333</a>
                            </div>
                        </li>
                    </ul>
                </li>    
 
                <li>
                    <div>
                        <a href="#">Team</a>
                    </div>
                </li>
                <li class="hasChildren">
                    <div>
                        <a href="#" class="link">Contact</a>
                        <a href="#" class="dropdown-toggle" aria-expanded="false">
                                    [1]
                            <i class="fa fa-angle-down"></i>
                        </a>
                    </div>
 
                    <ul class="sub-menu" role="group">
                        <li>
                            <div>
                                <a href="#">Adresse</a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href="#">Téléphone Téléphone Téléphone Téléphone</a>
                                </div>
                            </li>
                        <li>
                            <div>
                                <a href="#">e-mail</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <a href="#">Nos cours</a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">Menu 3</a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">Encore un beau menu 4</a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">Contact</a>
                    </div>
                </li>
            </ul>
        </nav>
 
    </section>

Ceci fonctionne bien, mais il y a deux menu qui se déroule et quand je clique sur le premier et sur le deuxième, le premier ne se ferme pas.

J'aimerais savoir comment je pourrais modifier mon code jquery pour qu'il ferme tous les menus ouvertes sauf celui qui a été cliqué.
Dans mon cas, j'en ai deux (ou trois car j'ai un sous-sous menu)

D'ailleur, petit complication: quand je clique sur un sous-sous menu, il ne devrait pas fermé son menu parent.
Et s'il y a trois sous-menu, tous les menus parent à se dernier doivent rester ouvert.

Il faudrait donc que tous les autres menus du premier du premier niveaux se ferment (et leurs sous-menu enfant).

Voyez-vous?

merciiii et bonne soirée

**Toufik83** · 14/09/2022, 00h01

Bonjour,

Avec la syntaxe de chaînage, ce code est fonctionnel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('toggle-on')
    .attr('aria-expanded',
      $(this).attr('aria-expanded') === 'false' ? 'true' : 'false'
    )
    .find('.fa').toggleClass('fa-angle-down fa-angle-up')
    .closest('div').eq(0).next('.sub-menu').toggleClass('toggled-on')
    .closest('.hasChildren').eq(0).siblings(".hasChildren")
    .find('.dropdown-toggle').eq(0).removeClass('toggle-on').attr('aria-expanded','false')
    .find('.fa').removeClass('fa-angle-up').addClass('fa-angle-down')
    .closest('div').eq(0).next('.sub-menu').removeClass('toggled-on');
});

Plus 3 lignes de CSS :

Code css :

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

1
2
3
.toggle-on{display:inline-block}
.sub-menu{display:none}
.sub-menu.toggled-on{display:block}

Ça serait mieux si vous attribuez une classe au <div class="maclasse"> parent de l'élément .dropdown-toggle, comme ça vous pouvez remplacer closest("div") par closest('.maclasse')

**pierrot10** · 14/09/2022, 05h33

Hello

Merci beaucoup. Ca bien aidé mais il y avait un bug lorsque j'ajoutais plusieurs menu déroulant. Si je cliquais sur le troisième, le deuxième ne se refermait pas.
Mais en creusant, j'ai réussi à faire ceci

https://www.eco-sensors.ch/temp/e-panel/

Code jquery :

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
 
( function( $ ) {
 
	$( '.dropdown-toggle' ).click( function( e ) {
		e.preventDefault();
 
		//console.log( e + ": " + $( this ).siblings('a').text() );
 
		// Add or remove the toggled-on class and change the aria-expand status of the link
		$(this).toggleClass('toggled-on').attr('aria-expanded',$(this).attr('aria-expanded') === 'false' ? 'true' : 'false')
    	.find('.fa').toggleClass('fa-angle-down fa-angle-up')
    	// find the closest parent div and go to the first ul.sub-menu, then add/remove the class toggled-on to the ué
    	.closest('div').eq(0).next('ul').toggleClass('toggled-on')
    	// Go up to the closest hasChildren class and look at all system/brother of .hasChildren
    	.closest('.hasChildren').eq(0).siblings(".hasChildren")
    	// Find .dropdown-toggle and do a forwach for all of them
    	.find('.dropdown-toggle').each(function(){
    		$('#breadcrumb').text('');
    		//$(this).css("background-color", "blue");
    		// remove the toggled-on class and change the axia-expanded status of each links
    		$(this).removeClass('toggled-on').attr('aria-expanded','false')
    		// change the icon
    		.find('.fa').removeClass('fa-angle-up').addClass('fa-angle-down')
    		// move up to the closest div and go to the next ul (ul.sub-menu) and remove the toggled-on class to close the menu
    		.closest('div').eq(0).next('ul').removeClass('toggled-on');
    	});
 
    	$('#breadcrumb').append(' / ' + $( this ).siblings('a').text());
 
	} );
 
})( jQuery );

Qu'en pensez-vous?

**Toufik83** · 14/09/2022, 07h37

Bonjour,

Mes remarques :

Si vous cliquez plusieurs fois sur le même (menu/sous menu), le texte de #breadcrumb se répète tant de fois...,, c'est parce que vous utilisez append, essayez de le remplacer par text()
Vous obligez l'utilisateur à cliquer sur la flèche pour afficher les menus, ce qui n'est pas vraiment approprié, normalement le menu doit s'afficher lors d'un clic sur le <div> parent.
Le (margin/padding) gauche des sous menu doit augmenter un peu, afin de séparer les éléments à l'affichage.

Fermer les éléments d'un menu au click

jQuery

Discussions similaires

Partager

Partager