如何在 Bootstrap 下拉菜单中实现子菜单？

解决 Bootstrap 下拉菜单中缺少子菜单的问题

简介

Bootstrap 3，流行前端的旧版本框架，缺乏一个专门的类来实现下拉菜单中的子菜单。这种缺席可归因于不断发展的网页设计趋势有利于更简单的界面和减少子菜单的使用。但是，有一些方法可以使用额外的 CSS 来实现子菜单功能。

Bootstraps 5（2023 年更新）

实现 JavaScript 以禁用子菜单在父菜单时自动关闭下拉菜单已打开：

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 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（2018 年更新）

由于删除了 Bootstrap 3 中的 dropdown-submenu 类，使用 CSS 的解决方法是必要：

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

.dropdown-submenu {
    position: relative;
}

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

Bootstrap 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;
}

标记：

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

以上是如何在 Bootstrap 下拉菜单中实现子菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！