Bonjour,

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

voir :

Le script jQuery semble bien fonctionner
Le script JS... non :
Je n'arrive pas à refermer l'autre sous-menu (ils se superposent)
Nom : bs5-nav-multi-level.jpg Affichages : 188 Taille : 17,7 Ko

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.