Discussion :

[l_achraf]

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 :

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
 
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.

[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 ?...

[l_achraf]

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 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
<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.

[NoSmoking]

Bonjour,
• bien que conforme dans son utilisation,

Code :

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

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 :

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

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 :

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

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 :

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

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

ou peut être mieux

Code :

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

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 html :

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

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

Commence donc par corriger ces points !

[l_achraf]

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

Grand chapeau.