Bagaimana untuk Melaksanakan Submenu dalam Bootstrap Dropdown?

Menyelesaikan Sub Menu yang Hilang dalam Bootstrap Dropdown

Pengenalan

Bootstrap 3, versi lama dari front-end yang popular rangka kerja, tidak mempunyai kelas khusus untuk melaksanakan sub menu dalam menu lungsur. Ketiadaan ini boleh dikaitkan dengan perkembangan trend reka bentuk web yang mengutamakan antara muka yang lebih ringkas dan pengurangan penggunaan submenu. Walau bagaimanapun, terdapat cara untuk mencapai fungsi sub menu menggunakan CSS tambahan.

Bootstraps 5 (Dikemas kini 2023)

Laksanakan JavaScript untuk melumpuhkan penutupan automatik submenu apabila induk lungsur turun dibuka:

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

Sebagai alternatif, gunakan CSS untuk Navbar lungsur turun:

.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 (Dikemas kini 2018)

Disebabkan pengalihan keluar kelas submenu lungsur dalam Bootstrap 3, penyelesaian menggunakan CSS diperlukan:

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

Penanda:

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

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Submenu dalam Bootstrap Dropdown?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!