Komponen dropdown di bilah navigasi bootstrap sangat sering digunakan. Artikel ini memperkenalkan acara ekstensi komponen dropdown di Bootstrap. Konten spesifiknya adalah sebagai berikut
Bagaimana cara mengimplementasikan acara hover ini? Bahkan, mudah untuk diselesaikan berdasarkan klik acara klik komponen dropdown. Mereka yang berhati-hati dapat menemukan bahwa ketika kotak drop-down muncul, induknya akan memiliki atribut kelas terbuka. Kita hanya perlu menambahkan atau menghapus kelas terbuka ke orang tua saat mendengarkan acara Hover.
plugin boostrap-hover-dropdown.js, URL kode yang di-host di github: tampilan
Berikut adalah kode plugin JS lengkap:
// bootstrap bilah navigasi responsif <br>; (function ($, window, tidak terdefinisi) {// di luar ruang lingkup plugin jQuery untuk // melacak semua dropdown var $ alldropdowns = $ (); // jika wearse wine benar -benar, maka akan langsung // menutup barang -barang nav lainnya ketika fungsi baru. Tentang // adalah orangtua dropdown-toggle $ alldropdowns = $ alldropdowns.add (this.parent ()); $ (ini) .data ('Close-Others')}, opsi = $ .Extend (true, {}, default, opsi, data), timeout; function () {timeout = window.setTimeOut (function () {$ this.removeclass ('open');}, options.delay);Anda dapat melihat bahwa penulis telah menambahkan titik koma di depan plug-in, yang meningkatkan kompatibilitas plug-in, karena kode JS sebelumnya mungkin tidak ditulis; Jika titik koma tidak ditambahkan di sini, itu dapat menyebabkan kesalahan JS karena tidak ada jeda garis.
Parameter opsional
Tunda: (Parameter opsional) Keterlambatan dalam milidetik. Ini adalah waktu untuk menutup pull-down sebelum mouse tidak lagi ada di menu tarik-turun atau item tombol/navigasi, aktifkan. Nilai default adalah 500.
CLOSEOTHOTHETH: (Parameter opsional) Nilai boolean, jika benar, akan segera menutup semua menu drop-down lainnya ketika Anda memulai navigasi pencocokan pemilih baru. Nilai standarnya benar.
Setelah menambahkan kode JS di atas, efeknya tidak dapat diwujudkan saat ini, karena kita perlu melakukan langkah lain, yaitu menambahkan atribut data-* ke elemen:
data-hover = "dropdown"
Kode Elemen HTML Lengkap:
Salin kode sebagai berikut: <a href = "javascript :;" data-kilat = "dropdown" data-hover = "dropdown"> </a>
Opsi dapat ditetapkan melalui atribut data, atau melalui data-penundaan dan data-tutup data
Salin kode sebagai berikut: <a href = "#" data-koggle = "dropdown" data-hover = "dropdown" data-delay = "1000" data-close-hother = "false"> </a>
Tentu saja, ada juga cara termudah, yaitu menggunakan css hover untuk mengontrol
[/code] .nav> li: hover .dropdown-menu {display: block;} [/code]
Kode semacam ini juga dapat mencapai efek hover yang diinginkan, tetapi jika Anda mengklik komponen saat melayang dan kemudian pergi ke komponen lain untuk melayang, efek berikut akan muncul:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah metode menggunakan komponen dropdown bootstrap yang telah Anda bagikan dengan Anda. Saya harap akan sangat membantu bagi Anda untuk menguasai acara Hover.