刪除「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:

JavaScript 方法引導程式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';
    })
});

除了純CSS 選項之外，您還可以使用一些JavaScript 在Bootstrap 5中實作子選單功能：

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 3 中使用 CSS的子選單功能：

結論雖然特定的子選單類別不再可用，但您可以使用幾種替代方法在Bootstrap 中建立下拉子選單，具體取決於您的需求和您正在使用的版本。

以上是刪除「dropdown-submenu」後如何在 Bootstrap 中建立下拉子選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！