Comment créer des listes déroulantes à plusieurs niveaux dans Bootstrap 4 ?

Liste déroulante à plusieurs niveaux dans Bootstrap 4

Lorsque vous travaillez avec Bootstrap 4, l'intégration de listes déroulantes à plusieurs niveaux dans les barres de navigation peut parfois poser un défi. Cependant, avec une combinaison de CSS et de JavaScript, la création de ces listes déroulantes est relativement simple.

CSS pour les listes déroulantes à plusieurs niveaux

Pour obtenir des listes déroulantes à plusieurs niveaux, des classes CSS supplémentaires sont introduites :

• .dropdown-submenu : Cette classe est appliquée à l'élément de menu parent qui contient la sous-liste déroulante.
• .dropdown-menu : Cette classe est appliquée à la sous-liste déroulante.
• .dropdown-item : Cette classe est appliquée à tous les éléments de la sous-liste déroulante.

Les règles CSS suivantes définissent les styles de ces éléments. éléments :

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

JavaScript pour les listes déroulantes à plusieurs niveaux

Pour gérer le basculement des sous-listes déroulantes, le code JavaScript suivant est utilisé :

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });


  return false;
});

Ce code attache un écouteur d'événement à n'importe quel élément de la sous-liste déroulante qui a la bascule de liste déroulante de classe. Lorsqu'un élément est cliqué, la classe d'affichage bascule dans la sous-liste déroulante, garantissant qu'une seule sous-liste déroulante est ouverte à la fois.

Intégration avec HTML

Dans votre code HTML, ajoutez simplement les classes nécessaires pour les listes déroulantes multiniveaux, comme le montre cet exemple :

<nav>

Utilisation de ces règles CSS et JavaScript, vous pouvez facilement créer des listes déroulantes à plusieurs niveaux dans les barres de navigation de Bootstrap 4, offrant ainsi une expérience de navigation conviviale et intuitive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!