Bagaimana untuk Mencipta Submenu Dropdown dalam Bootstrap Selepas Pembuangan `dropdown-submenu`?

Kefungsian Submenu Turun Bootstrap Dialih Keluar

Dalam Bootstrap 3, kelas submenu lungsur telah dihapuskan. Kelas ini menyediakan cara yang bersih untuk mencipta submenu bersarang di bawah menu lungsur utama. Walau bagaimanapun, pencipta Bootstrap memutuskan bahawa submenu telah menjadi usang, terutamanya dalam persekitaran mudah alih.

Pilihan Alternatif untuk Kefungsian Submenu

Kaedah CSS Sahaja:

Untuk Bootstrap 5, anda boleh menggunakan JavaScript atau CSS untuk mencapai submenu fungsi:

Submenu Navbar CSS-Sahaja pada Tuding

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

Submenu Navbar CSS-Sahaja pada Tuding (Dijajarkan Kanan)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Kaedah JavaScript untuk Bootstrap 5:

Selepas pilihan CSS sahaja, anda juga boleh melaksanakan fungsi submenu dalam Bootstrap 5 dengan beberapa 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';
    })
});

Kaedah CSS untuk Bootstrap 3:

Walaupun dialih keluar kelas dropdown-submenu, anda masih boleh melaksanakan fungsi submenu dalam Bootstrap 3 dengan 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;
}

Kesimpulan

Walaupun kelas submenu tertentu tidak lagi tersedia, terdapat beberapa pendekatan alternatif yang boleh anda gunakan untuk mencipta submenu lungsur dalam Bootstrap, bergantung pada keperluan anda dan versi yang anda gunakan. sedang menggunakan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Submenu Dropdown dalam Bootstrap Selepas Pembuangan `dropdown-submenu`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!