Wie erstelle ich Dropdown-Untermenüs in Bootstrap nach der Entfernung von „dropdown-submenu'?

Bootstrap-Dropdown-Untermenü-Funktionalität entfernt

In Bootstrap 3 wurde die Dropdown-Untermenü-Klasse entfernt. Diese Klasse bot eine saubere Möglichkeit, verschachtelte Untermenüs unter einem Haupt-Dropdown zu erstellen. Allerdings entschieden die Entwickler von Bootstrap, dass Untermenüs veraltet waren, insbesondere in mobilen Umgebungen.

Alternative Optionen für Untermenüfunktionen

Nur ​​CSS-Methoden:

Für Bootstrap 5 können Sie JavaScript oder CSS verwenden, um Untermenüs zu erreichen Funktionalität:

Nur ​​CSS-Navbar-Untermenü beim Hover

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

CSS-Nur-Navbar-Untermenü beim Hover (rechtsbündig)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

JavaScript-Methode für Bootstrap 5:

Über die reinen CSS-Optionen hinaus: Sie können Untermenüfunktionen auch in Bootstrap 5 mit etwas JavaScript implementieren:

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling;
        el.style.display = el.style.display==='block'?'none':'block';
    })
});

CSS-Methode für Bootstrap 3:

Trotz der Entfernung der Dropdown-Untermenüklasse, Sie können in Bootstrap 3 weiterhin Untermenüfunktionen implementieren CSS:

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

Fazit

Während bestimmte Untermenüklassen nicht mehr verfügbar sind, gibt es je nach Ihren Anforderungen und der von Ihnen verwendeten Version mehrere alternative Ansätze, mit denen Sie Dropdown-Untermenüs in Bootstrap erstellen können Ich benutze.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Dropdown-Untermenüs in Bootstrap nach der Entfernung von „dropdown-submenu'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!