Discussion :

[jreaux62]

Bonjour,

j'essaie - vainement - de traduire un script jQuery en JS pur, pour un menu Bootstrap 5 multi-level.

voir :

• https://codepen.io/jreaux62/pen/dyzrRxN

Le script jQuery semble bien fonctionner
Le script JS... non :
Je n'arrive pas à refermer l'autre sous-menu (ils se superposent)


jQuery :

Code js :

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
// ---------------------------------------------------------
// Bootstrap 5 : Responsive Dropdown Multi Submenu
// (nécessite jQuery, EN ATTENTE de conversion en JS vanilla)
// ---------------------------------------------------------
$(function(){
 
  $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    var subMenu = $(this).next(".dropdown-menu");
    subMenu.toggleClass('show'); 			// appliqué au ul
    $(this).parent().toggleClass('show'); 	// appliqué au li parent
 
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass('show'); 	// appliqué au ul
      $('.dropdown-submenu.show').removeClass('show'); 		// appliqué au li parent
    });
  });
 
});

Tentative en JS pur :

Code js :

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
// ---------------------------------------------------------
// Bootstrap 5 : Responsive Dropdown Multi Submenu
// ---------------------------------------------------------
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  document.querySelectorAll('.dropdown-menu a.dropdown-toggle').forEach( (elt) => {
    elt.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();
      /*
      if( elt.nextElementSibling && !elt.nextElementSibling.classList.contains('show') ){
        var parents = getParents(elt,'dropdown-menu'); // nodes
        for (const parent of parents) {
          if( parent.classList && parent.classList.contains('show') )
          {
            parent.classList.remove('show');
          }
        }
      }
      */
      if( elt.nextElementSibling )
      {
        var subMenu = elt.nextElementSibling;
        subMenu.classList.toggle('show'); 			// appliqué au ul
        elt.parentNode.classList.toggle('show'); 	// appliqué au li parent
      }
    });
  });
});
// ------------------------------
// get parents of element with specific className
/*
function getParents(el, parentClass) {
  var parentSelector = document;
  var parents = [];
  var p = el.parentNode;
  while (p !== parentSelector)
  {
    var o = p;
    if( o.classList && o.classList.contains(parentClass) )
    {
      parents.push(o);
    }
    p = o.parentNode;
  }
  parents.push(parentSelector);
  return parents;
}
*/

Si une âme charitable passe par là...
Merci.

[Toufik83]

Bonjour,

Il faut cacher tous les .dropdown-submenu .dropdown-menu à chaque clic :

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
 
 
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  document.querySelectorAll('.dropdown-menu a.dropdown-toggle')
    .forEach( (elt) => {
    elt.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();
      document.querySelectorAll('.dropdown-submenu .dropdown-menu')//ici
        .forEach(elem=>{
        elem.classList.remove('show');
        elem.classList.add('hide');
      });
     if( elt.nextElementSibling )
      {
        var subMenu = elt.nextElementSibling;
        subMenu.classList.toggle('show'); 			// appliqué au ul
        elt.parentNode.classList.toggle('show'); 	// appliqué au li parent
      }
    });
  });
});

[jreaux62]

@Toufik83
MERCI, ça marche *

• https://codepen.io/jreaux62/pen/dyzrRxN

* PAR CONTRE, le "toggle", non :

• quand on clic sur le sous-menu en cours, il ne se referme pas

N.B.

Code :

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

elem.classList.add('hide');

??
.remove('show') est censé suffire, non ?

[jreaux62]

C'est bon, je crois qu'on y est :

• https://codepen.io/jreaux62/pen/dyzrRxN

Code js :

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
// ---------------------------------------------------------
// Bootstrap 5 : Responsive Dropdown Multi Submenu
// ---------------------------------------------------------
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  // Traitement des sous-sous-menus
  document.querySelectorAll('.dropdown-submenu a.dropdown-toggle').forEach( (elt) => {
    elt.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();
      if( elt.nextElementSibling )
      {
        var subMenu = elt.nextElementSibling;
        document.querySelectorAll('.dropdown-submenu .dropdown-menu').forEach( (elem) => {
          if( elem != subMenu )
          {
            elem.classList.remove('show');
          }
        });
        subMenu.classList.toggle('show'); 			// appliqué au ul
        elt.parentNode.classList.toggle('show'); 	// appliqué au li parent
      }
    });
  });
});

[Toufik83]

oui jreaux62, je ne l'avais pas vu, mais apparemment tu as trouvé la solution.

[jreaux62]

Ci fait
Merci à toi, Toufik83
(j'avais testé tant du trucs que je n'y voyais plus rien...)

Par contre.... "j'ai cru voir un Gros-Minet..."
Je voulais dire : un message de Beginner.
(effacé ?)

[Beginner.]

C'est bon, je crois qu'on y est :

• https://codepen.io/jreaux62/pen/dyzrRxN

J'ai testé et ça marche bien.

Par contre il y a une condition dans ton code JQuery if (!$(this).next().hasClass('show')) qui était utile je trouve car cela permettait de faire ce qui suit seulement si nécessaire...

Et aussi peut-être que tu devrais cibler un peu plus cette recherche : document.querySelectorAll('.dropdown-submenu .dropdown-menu').forEach(...) car là tu recherches dans tout le document. On pourrait par exemple limiter la recherche au menu, ce serait déjà ça et si on veut faire plus précis on peut s'inspirer de ton code JQuery : $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");.

J'ai remarqué que $(this).parents('.dropdown-menu').first() correspondait au grand-père lol de l’élément cliqué c'est pourquoi j'ai fait ça : let show_elem = elt.parentElement.parentElement.querySelectorAll(".show").

En tous cas là tu n'as plus besoin de JQuery et je voulais aussi te demander : penses-tu qu'on peut aussi se passer de bootstrap pour faire ce menu ?

PS : Je serais tenter aussi d'utiliser la délégation : un seul listener pour le menu...

[NoSmoking]

En tous cas là tu n'as plus besoin de JQuery et je voulais aussi te demander : penses-tu qu'on peut aussi se passer de bootstrap pour faire ce menu ?

Les menus de ce type existaient bien avant que BootStrap ne voit le jour

PS : Je serais tenter aussi d'utiliser la délégation : un seul listener pour le menu...

L'utilisation de la délégation est surtout intéressante lorsqu'il y a création dynamique d'éléments, dans le cas présent cela ne représente pas un véritable intérêt même si c'est effectivement faisable.

Code adopté !

alors prend en bien soin !