Ubah suai menu lungsur turun dalam Bootstrap untuk dipaparkan terus pada hover tetikus [original]_javascript skills

Baru-baru ini, syarikat saya menggunakan fungsi menu Bootstrap semasa membuat halaman web. Ia mahu memaparkan menu kedua pada tuding tetikus, jadi saya melakukan penyelidikan dan mendapati bahawa mungkin terdapat dua kaedah.

Kaedah pertama: ubah suai helaian gaya

Sebenarnya, anda hanya perlu menambah css untuk menetapkan status tuding dan menetapkan menu lungsur untuk menyekat css tertentu:

Salin kod Kod adalah seperti berikut:

.nav > li:hover .dropdown-menu {paparan: blok;}

Css ini ditambahkan pada css yang muncul selepas bootstrap.min.css.

Kelemahan:
1. Menu peringkat atas yang sepadan tidak boleh diklik
2. Selepas meluncurkan tetikus ke menu peringkat kedua, menu peringkat atas tidak mempunyai gaya

Kaedah kedua: Gunakan ciri JQuery untuk mencapai

Digabungkan dengan tutorial dalam talian, masalah itu boleh diselesaikan dengan menggunakan dua acara dalam JQuery, css khusus:

Salin kod Kod adalah seperti berikut:

//Tutup acara click.bs.dropdown.data-api dan jadikan menu atas boleh diklik
$(document).off('click.bs.dropdown.data-api');
// Kembangkan secara automatik
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//Tutup secara automatik
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

Kaedah ini bukan sahaja membolehkan menu teratas diklik, tetapi gaya tidak akan hilang Ia juga boleh menyelesaikan masalah Bootstrap mouse hovering Ia disyorkan untuk digunakan oleh semua orang.