แถบการนำทางที่ตอบสนองจะใช้เมื่อใช้ bootstrap เพื่อสร้างพื้นหลัง ในหมู่พวกเขาส่วนประกอบดรอปดาวน์จะถูกใช้บ่อยขึ้น ยิ่งคุณใช้มันมากเท่าไหร่คุณก็ต้องคลิกมากขึ้นเท่านั้น ดรอปดาวน์ค่าเริ่มต้นเพื่อขยายปุ่มเมาส์ซ้าย หากคุณใช้เมาส์เพื่อขยาย (โฮเวอร์) จะประหยัดเวลาในการคลิกซึ่งสามารถปรับปรุงประสิทธิภาพได้
แนวคิดการแปลงเดิมคือ: ผูกเหตุการณ์โฮเวอร์กับองค์ประกอบแบบเลื่อนลง เมื่อโฮเวอร์เพิ่มขึ้นให้ดำเนินการเหตุการณ์คลิกขององค์ประกอบ - นั่นคือซิงโครไนซ์โฮเวอร์เป็นคลิกและโฮเวอร์คือคลิก
แต่การคิดว่าแทนที่จะปรับปรุงด้วยตัวคุณเองจะเป็นการดีกว่าที่จะค้นหาออนไลน์เพื่อดูว่ามีปลั๊กอินสำเร็จรูปหรือไม่ แน่นอนฉันค้นหาและ URL รหัสที่โฮสต์บน GitHub: ดู
มาคัดลอกรหัสที่นี่:
; (ฟังก์ชั่น ($, หน้าต่าง, undefined) {// นอกขอบเขตของปลั๊กอิน jQuery เพื่อ // ติดตามทั้งหมด dropdownsvar $ alldropdowns = $ (); // ถ้าทันทีที่เป็นจริงมันจะเป็นตัวเลือก // parent $ alldropdowns = $ alldropdowns.add (this.parent ()); return this.each (function () {var $ this = $ (this) .parent (), ค่าเริ่มต้น = {delay: 500, ทันที: true}, data = {delay: $ (this) .data (' $ .Extend (จริง, {}, ค่าเริ่มต้น, ตัวเลือก, ข้อมูล), หมดเวลา; $ this.hover (function () {ถ้า (ตัวเลือก (ตัวเลือก instantlycloseothers === true) $ alldropdowns.removeclass ('เปิด'); window.leartimeout (หมดเวลา); {$ this.removeClass ('เปิด');}, ตัวเลือก. delay);});});}); $ ('[data-hover = "dropdown"]'). dropdownhover ();}) (jQuery, this);คุณจะเห็นว่าผู้เขียนได้เพิ่มเครื่องหมายอัฒภาคที่ด้านหน้าของปลั๊กอินซึ่งจะเพิ่มความเข้ากันได้ของปลั๊กอินเนื่องจากรหัส JS ก่อนหน้านี้อาจไม่ถูกเขียน หากไม่มีการเพิ่มเครื่องหมายอัฒภาคที่นี่อาจทำให้เกิดข้อผิดพลาด JS เนื่องจากไม่มีการแบ่งบรรทัด
ปลั๊กอินรองรับการถ่ายโอนพารามิเตอร์องค์ประกอบ HTML-* และยังรองรับการถ่ายโอนพารามิเตอร์การเริ่มต้น เพียงวางรหัส JS นี้ไว้เบื้องหลังรหัส JS ดั้งเดิมใน Bootstrap
ด้านบนคือการแนะนำตัวแก้ไขเพื่อเปลี่ยนเมนูแบบเลื่อนลงแบบดรอปดาวน์ใน Bootstrap เป็น Hover Trigger ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!