Wie kann ich mehrstufige Dropdowns in der Bootstrap 4-Navigation erstellen?

Bootstrap 4: Mehrstufige Dropdowns in Navigationen freisetzen

Wenn Sie nach einer nahtlosen Möglichkeit suchen, mehrstufige Dropdowns in Bootstrap 4 zu integrieren, sind Sie hier genau richtig. Die folgenden CSS- und JavaScript-Schnipsel führen Sie durch den Prozess.

CSS für Dropdown-Untermenüs

Dieses CSS zielt auf die Erstellung zusätzlicher Dropdown-Untermenüstile ab.

.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 Untermenü Umschalten

Dieses JavaScript übernimmt das Umschalten der Sichtbarkeit von Dropdown-Untermenüs.

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

HTML-Beispiel

Integration von CSS und JavaScript Das HTML-Beispiel zeigt ein funktionales Dropdown-Menü mit drei Ebenen.

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com">

Mit diesen Schritten können Sie das tun Erstellen und passen Sie mühelos mehrstufige Dropdowns an, die die Benutzernavigation und -interaktion in Bootstrap 4 verbessern.

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