Bilah navigasi responsif digunakan saat menggunakan bootstrap untuk membuat latar belakang. Di antara mereka, komponen dropdown lebih sering digunakan. Semakin banyak Anda menggunakannya, semakin banyak yang perlu Anda klik. Default dropdown untuk memperluas tombol mouse kiri. Jika Anda menggunakan mouse untuk memperluasnya (melayang) itu akan menghemat waktu mengklik, yang dapat meningkatkan efisiensi.
Gagasan transformasi asli adalah: Bind the Hover Event ke elemen dropdown. Saat hover naik, jalankan acara klik elemen - yaitu, menyinkronkan hover sebagai klik, dan hover adalah klik.
Tetapi berpikir bahwa alih-alih merenovasinya sendiri, lebih baik mencari online untuk melihat apakah ada plugin siap pakai. Benar saja, saya mencarinya dan URL kode yang di -host di GitHub: Lihat
Di sini, cukup salin kode:
; (function ($, window, tidak terdefinisi) {// Di luar ruang lingkup plugin jQuery untuk // melacak semua dropdownsvar $ alldropdowns = $ (); // Jika instanen yang benar-benar benar, maka itu akan langsung // opsi-opsi yang baru) di sekitarnya) di sekitarnya, we. induk $ alldropdowns = $ alldropdowns.add (this.parent ()); return this.each (function () {var $ this = $ (this) .parent (), default = {delay: 500, instle closeothers,}}, {delay: $ (ini) .data ('Delay', instan,), instan, $ {DATA: $ (ini) .data ('Delay', instan, $ {Data = {ini. $ .Extend (true, {}, default, opsi, data), timeout; $ this.hover (function () {if (options.instlycloseothers === true) $ allDropDowns.removeclass ('open'); window.cleartimeout (timeout); $ (ini) .addclass ('open'); function (function (function); $ (ini) .addlass ('open'); function (function (function); $ (ini) .addlass ('open'); function (function (function (function); $ (ini) .addClass ('open'); function (function (function (function (function (function (function (function). {$ this.removeclass ('open');}, options.delay);});});}); $ ('[data-hover = "dropdown"]'). dropdownHover ();}) (jQuery, this);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.
Plug-in mendukung Data Elemen HTML- Transfer Parameter*, dan juga mendukung transfer parameter inisialisasi. Tempatkan kode JS ini di belakang kode JS asli di Bootstrap.
Di atas adalah pengantar editor untuk mengubah menu dropdown dropdown di bootstrap untuk melayang pemicu. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!