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">

2. CSS-Styling

Fügen Sie das folgende CSS zu Ihrem Stylesheet hinzu:

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

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!

JavaScript css bootstrap html ul

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn