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

Navigation déroulante à plusieurs niveaux avec Bootstrap 4

La création de listes déroulantes à plusieurs niveaux dans Bootstrap 4 peut être réalisée avec un minimum de modifications CSS et JavaScript. Voici comment procéder :

1. Structure HTML

Assurez-vous que votre navigation contient des éléments

et

éléments comme suit :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  ...
  <div class="collapse navbar-collapse">

2. Style CSS

Ajoutez le CSS suivant à votre feuille de style :

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

3. JavaScript

Enfin, ajoutez le JavaScript suivant :

$('.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;
});

Démonstration

Cette approche vous permet de créer des listes déroulantes multiniveaux complexes parfaitement intégrées à votre navigation Bootstrap 4. Il garantit qu'un seul sous-menu est ouvert à la fois, évitant ainsi les chevauchements ou les conflits d'imbrication.

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!

JavaScript css bootstrap html ul

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn