Wie erstelle ich mehrstufige Dropdowns in Bootstrap 4?

Mehrstufige Dropdowns in Bootstrap 4

Bei der Arbeit mit Bootstrap 4 kann die Integration mehrstufiger Dropdowns in Navigationsleisten manchmal eine Herausforderung darstellen. Mit einer Kombination aus CSS und JavaScript ist das Erstellen dieser Dropdowns jedoch relativ einfach.

CSS für mehrstufige Dropdowns

Um mehrstufige Dropdowns zu erreichen, werden zusätzliche CSS-Klassen eingeführt:

• .dropdown-submenu: Diese Klasse wird auf den übergeordneten Menüpunkt angewendet, der enthält das Unter-Dropdown.
• .dropdown-menu: Diese Klasse wird auf das Unter-Dropdown angewendet.
• .dropdown-item: Diese Klasse wird auf alle Elemente innerhalb des Unter-Dropdowns angewendet.

Die folgenden CSS-Regeln definieren die Stile dafür Elemente:

.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 für mehrstufige Dropdowns

Um das Umschalten von Unter-Dropdowns zu handhaben, wird der folgende JavaScript-Code verwendet:

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

Dieser Code fügt einen Ereignis-Listener an jedes Element innerhalb des Unter-Dropdowns an, das über die Klasse „Dropdown-Toggle“ verfügt. Wenn auf ein Element geklickt wird, wird die Anzeigeklasse im Unter-Dropdown umgeschaltet, um sicherzustellen, dass jeweils nur ein Unter-Dropdown geöffnet ist.

Integration mit HTML

Fügen Sie in Ihrem HTML-Code einfach die erforderlichen Klassen für mehrstufige Dropdowns hinzu, wie in diesem Beispiel gezeigt:

<nav></nav>

Verwendung dieses CSS Mithilfe von Regeln und JavaScript können Sie in Bootstrap 4 mühelos mehrstufige Dropdowns in Navigationsleisten erstellen und so ein benutzerfreundliches und intuitives Navigationserlebnis bieten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrstufige Dropdowns in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!