Affichage dropdown menu

Version imprimable

Cordialement,

Mon Problème est que quand je clique par exemple sur dropdowm menu 1 et puis dropdown menu 2, dropdowm menu devient inactif.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
jQuery(document).ready(function(e) {
  e(".dropdown-toggle").click(function() {
   var t = e(this).parents(".button-dropdown").children(".dropdown- 
   menu").is(":hidden");
  e(".button-dropdown .dropdown-menu").hide();
  e(".button-dropdown .dropdown-toggle").removeClass("active");
  if (t) {
   e(this).parents(".button-dropdown").children(".dropdown- 
   menu").toggle().parents(".button-dropdown").children(".dropdown- 
   toggle").addClass("active")
   }
});
$('.dropdown-toggle').on('click', function() {
$(this)
  .find('.changed')
  .toggleClass('fa-angle-down')
  .toggleClass('fa-angle-right');
}); });

Merci pour votre aide.

25/04/2019, 18h28
Invité
Bonjour,
- tu NE nous dit PAS si tu utilises Bootstrap ou pas (et quelle version ?), ou autre ?
- ni si tu utilises un CMS (WP ? ... ?)
- et tu ne montres pas le code HTML associé
Que veux-tu qu'on te réponde ?...
:cristal:

Affichage du dropdown menu

Merci pour votre réponse.

J'utilise framework Materialaze 1.0.0 et Jquery 3.3.1

Voila la partie de mon code HTML qui contient markup du dropdown menu.

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
<li class="button-dropdown">
  <a href="javascript:void(0)" class="dropdown-toggle"><i 
  class="material-
  icons">assignment</i>Text A<i class="fa fa-angle-right changed"></i> 
  </a>
  <ul class="dropdown-menu" style="display: none;">
    <li>
      <a onclick="load('param1', 'param2')"><i class="material-
      icons">library_books</i>Module 1</a>
    </li>
  </ul>
  <ul class="dropdown-menu" style="display: none;">
   <li>
      <a onclick="load('param1', 'param2')"><i class="material-
      icons">TextB</i>Module 2</a>
   </li>
  </ul>
</li>
<li class="button-dropdown">
  <a href="javascript:toggleDiv('myContent');" class="dropdown-toggle"><i 
  class="material-icons">assessment</i><span id="myContent">C</span><i 
  class="fa fa-angle-right changed"></i></a>
  <ul class="dropdown-menu" style="display: none;">
    <li>
      <a onclick="load('unitb1', 'Unit B - Reproduction and 
      Development')"><i 
      class="material-icons">library_books</i>Module 1</a>
    </li>
  </ul>
  <ul class="dropdown-menu" style="display: none;">
    <li>
      <a onclick="load('unitb2', 'Unit B > Module 2')"><i 
      class="material- 
      icons">description</i>Module 2</a>
    </li>
  </ul>
</li>

J'espère que c'est un peu clair maintenant. Merci encore.

27/04/2019, 10h21
NoSmoking
Bonjour,
• bien que conforme dans son utilisation,
Code:

1 2 3 jQuery(document).ready(function(e), { e(".dropdown-toggle").click(function() { // ...
e représentant l’objet jQuery, il est quand même préférable d'écrire, pour la cohérence d'écriture
Code:

1 2 3 jQuery(document).ready(function(), { $(".dropdown-toggle").click(function() { // ...
tout le monde s'y retrouvera lorsqu'il lira ton code.

• Quels sont tous ces espaces présent dans ton code qui ne doivent pas manquer de générer des erreurs
Code:

1 2 3 4 e(this).parents(".button-dropdown").children(".dropdown- menu").toggle().parents(".button-dropdown").children(".dropdown- toggle").addClass("active") }
pour quoi ne pas écrire simplement

Code:

$(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")

ou peut être mieux
Code:

1 2 3 4 5 6 $(this).parents(".button-dropdown") .children(".dropdown-menu") .toggle() .parents(".button-dropdown") .children(".dropdown-toggle") .addClass("active")
pour mieux « appréhender » le chaînage !

• Lorsque l'on écrit du code avec jQuery on ne met de code action dans les balises

Code:

<a href="javascript:toggleDiv('myContent');" class="dropdown-toggle">

Commence donc par corriger ces points !
30/04/2019, 23h07
l_achraf

Merci beaucoup. J'ai suivi tes conseils et mon problème a été résolu.

Grand chapeau.