如何在 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;
}

CSS：

<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中文網其他相關文章！