Fermer les éléments d'un menu au click
Bonjour à tous,
J'essaye de contruire mon propre menu à plusieurs niveau.
Il agit en fonction de la class dropdown-toggle
Code:
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:
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
