删除'dropdown-submenu”后如何在 Bootstrap 中创建下拉子菜单？

删除了 Bootstrap 下拉子菜单功能

在 Bootstrap 3 中，下拉子菜单类已被删除。此类提供了一种在主下拉菜单下创建嵌套子菜单的干净方法。然而，Bootstrap 的创建者认为子菜单已经过时，尤其是在移动环境中。

子菜单功能的替代选项

纯 CSS 方法：

对于Bootstrap 5，可以使用JavaScript或CSS来实现子菜单功能：

悬停时仅 CSS 导航栏子菜单

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

悬停时仅 CSS 导航栏子菜单（右对齐）

.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 方法引导程序5:

除了纯 CSS 选项之外，您还可以使用一些 JavaScript 在 Bootstrap 5 中实现子菜单功能：

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

Bootstrap 3 的 CSS 方法：

尽管删除了下拉子菜单类，您仍然可以实现Bootstrap 3 中使用 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;
}

结论

虽然特定的子菜单类不再可用，但您可以使用几种替代方法在 Bootstrap 中创建下拉子菜单，具体取决于您的需求和您正在使用的版本。

以上是删除'dropdown-submenu”后如何在 Bootstrap 中创建下拉子菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！