Maison >interface Web >tutoriel CSS >Comment puis-je créer des listes déroulantes à plusieurs niveaux dans la navigation Bootstrap 4 ?

Comment puis-je créer des listes déroulantes à plusieurs niveaux dans la navigation Bootstrap 4 ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-11 21:27:15735parcourir

How can I create multi-level dropdowns in Bootstrap 4 navigation?

Bootstrap 4 : Libérer des listes déroulantes à plusieurs niveaux dans les navigations

Lorsque vous recherchez un moyen transparent d'incorporer des listes déroulantes à plusieurs niveaux dans Bootstrap 4, ne cherchez pas plus loin. Les extraits CSS et JavaScript suivants vous guideront tout au long du processus.

CSS pour les sous-menus déroulants

Ce CSS cible la création de styles de sous-menus déroulants supplémentaires.

.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 basculer le sous-menu

Ce JavaScript gère le basculement de la visibilité des sous-menus déroulants.

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

Exemple HTML

Incorporant CSS et JavaScript, cet exemple HTML montre une liste déroulante fonctionnelle à trois niveaux.


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!

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