masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Ubah suai menu lungsur turun dalam Bootstrap untuk dipaparkan terus pada hover tetikus [original]_javascript skills

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

WBOY
Lepaskan： 2016-05-16 15:05:35
asal
1998 orang telah melayarinya

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.

Label berkaitan：
bootstrap 下拉菜单
sumber：php.cn
Artikel sebelumnya：Jquery melaksanakan $.fn.extend dan $.extend functions_jquery Artikel seterusnya：Penjelasan terperinci tentang pelaksanaan Jquery untuk acara siap dan ikat_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
daripada 2024-04-05 08:45:39
0
1
3443
Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
daripada 2024-04-04 22:16:18
0
1
1450
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan