Fehlendes Untermenü im Bootstrap-Dropdown beheben

Einführung

Bootstrap 3, eine ?ltere Version des beliebten Frontends Framework fehlte eine dedizierte Klasse zum Implementieren von Untermenüs in Dropdowns. Dieses Fehlen l?sst sich auf die sich entwickelnden Webdesign-Trends zurückführen, die einfachere Benutzeroberfl?chen und eine reduzierte Verwendung von Untermenüs bevorzugen. Es gibt jedoch M?glichkeiten, die Funktionalit?t von Untermenüs mithilfe von zus?tzlichem CSS zu erreichen.

Bootstraps 5 (aktualisiert 2023)

Implementieren Sie JavaScript, um das automatische Schlie?en von Untermenüs beim ?ffnen des übergeordneten Menüs zu deaktivieren Dropdown-Liste ist ge?ffnet:

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'
    })
})

Alternativ k?nnen Sie CSS für die Navigationsleiste verwenden Dropdowns:

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

Bootstraps 4 (aktualisiert 2018)

Aufgrund der Entfernung der Dropdown-Untermenü-Klasse in Bootstrap 3 ist eine Problemumgehung mithilfe von CSS erforderlich:

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

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

Bootstraps 3

CSS:

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

Markup:

<ul class="nav navbar-nav">
    <li class="menu-item dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                <ul class="dropdown-menu">
                    <li class="menu-item">
                        <a href="#">Link 1</a>
                    </li>
                    <li class="menu-item dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Das obige ist der detaillierte Inhalt vonWie implementiert man Untermenüs in Bootstrap-Dropdowns?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!