Wie erstelle ich mehrstufige Dropdowns in Bootstrap 4?

Mehrstufige Dropdown-Navigation mit Bootstrap 4

Das Erstellen mehrstufiger Dropdown-Menüs in Bootstrap 4 kann mit minimalen CSS- und JavaScript-Änderungen erreicht werden. So können Sie es machen:

1. HTML-Struktur

Stellen Sie sicher, dass Ihre Navigation verschachtelte

-Elemente enthält. und

Elemente wie folgt:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  ...
  <div class="collapse navbar-collapse">
<h3 id="CSS-Styling">2. CSS-Styling</h3>
<p>Fügen Sie das folgende CSS zu Ihrem Stylesheet hinzu:</p>
<pre class="brush:php;toolbar:false">.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

Fügen Sie abschließend das folgende JavaScript hinzu:

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

Demonstration

Mit diesem Ansatz können Sie komplexe mehrstufige Dropdowns erstellen, die nahtlos in Ihre Bootstrap 4-Navigation integriert sind. Dadurch wird sichergestellt, dass jeweils nur ein Untermenü geöffnet ist, wodurch Überlappungen oder Verschachtelungskonflikte vermieden werden.