Baru -baru ini, perusahaan menggunakan fungsi menu Bootstrap untuk membuat halaman web. Perlu mengarahkan mouse untuk menampilkan menu sekunder, jadi saya mempelajarinya dan menemukan bahwa mungkin ada dua metode.
Metode pertama: ubah lembar gaya
Bahkan, itu relatif sederhana. Anda hanya perlu menambahkan CSS untuk mengatur keadaan melayang dan mengatur menu tarik-turun untuk diblokir. Untuk CSS tertentu:
Salinan kode adalah sebagai berikut:
.nav> li: hover .dropdown-menu {display: block;}
Kalimat ini CSS ditambahkan ke CSS yang muncul setelah bootstrap.min.css, coba!
kekurangan:
1. Menu atas yang sesuai tidak dapat diklik
2. Setelah mouse meluncur ke menu sekunder, menu atas tidak memiliki gaya
Metode kedua: Gunakan fitur jQuery untuk diterapkan
Dikombinasikan dengan tutorial online, dua acara di jQuery dapat menyelesaikan masalah. Untuk CSS tertentu:
Salinan kode adalah sebagai berikut:
// Tutup acara click.bs.dropdown.data-api untuk membuat menu teratas diklik
$ (dokumen) .off ('click.bs.dropdown.data-api');
// Asal secara otomatis
$ ('. nav .dropdown'). mouseEnter (function () {
$ (ini) .addclass ('terbuka');
});
//Asli
$ ('. nav .dropdown'). mouseleave (function () {
$ (ini) .removeclass ('terbuka');
});
Metode ini tidak hanya memungkinkan Anda untuk mengklik menu atas, tetapi juga tidak kehilangan gaya, tetapi juga memecahkan masalah mouse bootstrap yang melayang. Dianjurkan untuk semua orang.