Das Erstellen mehrstufiger Dropdown-Menüs in Bootstrap 4 kann mit minimalen CSS- und JavaScript-Änderungen erreicht werden. So können Sie es machen:
Stellen Sie sicher, dass Ihre Navigation verschachtelte
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> ... <div class="collapse navbar-collapse">
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; }
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; });
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!