ส่วนประกอบดรอปดาวน์ในแถบการนำทาง bootstrap ใช้บ่อยมาก บทความนี้แนะนำเหตุการณ์การขยายส่วนขยายส่วนประกอบแบบเลื่อนลงใน Bootstrap เนื้อหาเฉพาะมีดังนี้
จะนำเหตุการณ์โฮเวอร์นี้ไปใช้อย่างไร? ในความเป็นจริงมันง่ายที่จะเสร็จสมบูรณ์ตามเหตุการณ์การคลิกขององค์ประกอบดรอปดาวน์ ผู้ที่ระมัดระวังสามารถพบได้ว่าเมื่อกล่องดรอปดาวน์ปรากฏขึ้นผู้ปกครองจะมีแอตทริบิวต์แบบเปิด เราต้องเพิ่มหรือลบคลาส Open ไปยังผู้ปกครองเมื่อฟังเหตุการณ์ Hover
ปลั๊กอิน boostrap-hover-dropdown.js, รหัส URL ที่โฮสต์บน GitHub: ดู
นี่คือรหัสปลั๊กอิน JS ที่สมบูรณ์:
// bootstrap แถบการนำทางที่ตอบสนองได้ <br>; (ฟังก์ชั่น ($, หน้าต่าง, ไม่ได้กำหนด) {// นอกขอบเขตของปลั๊กอิน jQuery เพื่อ // ติดตามการดรอปดาวน์ทั้งหมด var $ alldropdowns = $ (); // ใส่ใจ // คือผู้ปกครองของ Dropdown-Toggle $ Alldropdowns = $ alldropdowns.add (this.parent ()); $ (นี้) .data ('close-yother')}, ตัวเลือก = $. extend (จริง, {}, ค่าเริ่มต้น, ตัวเลือก, ข้อมูล), หมดเวลา; ฟังก์ชั่น () {timeout = window.settimeout (ฟังก์ชั่น () {$ this.removeclass ('เปิด');}, ตัวเลือกคุณจะเห็นว่าผู้เขียนได้เพิ่มเครื่องหมายอัฒภาคที่ด้านหน้าของปลั๊กอินซึ่งจะเพิ่มความเข้ากันได้ของปลั๊กอินเนื่องจากรหัส JS ก่อนหน้านี้อาจไม่ถูกเขียน หากไม่มีการเพิ่มเครื่องหมายอัฒภาคที่นี่อาจทำให้เกิดข้อผิดพลาด JS เนื่องจากไม่มีการแบ่งบรรทัด
พารามิเตอร์เสริม
ความล่าช้า: (พารามิเตอร์ทางเลือก) ล่าช้าในมิลลิวินาที นี่เป็นเวลาที่จะปิดการดึงลงก่อนที่เมาส์จะไม่อยู่ในเมนูแบบเลื่อนลงหรือรายการปุ่ม/การนำทางอีกต่อไปเปิดใช้งาน ค่าเริ่มต้นคือ 500
InstandingCloseothers: (พารามิเตอร์ทางเลือก) ค่าบูลีนถ้าเป็นจริงจะปิดเมนูแบบเลื่อนลงอื่น ๆ ทั้งหมดทันทีเมื่อคุณเริ่มการนำทางที่จับคู่ตัวเลือกใหม่ ค่าเริ่มต้นเป็นจริง
หลังจากเพิ่มรหัส JS ข้างต้นแล้วเอฟเฟกต์จะไม่สามารถรับรู้ได้ในเวลานี้เพราะเราต้องทำขั้นตอนอื่นซึ่งก็คือการเพิ่มแอตทริบิวต์ข้อมูล-* ลงในองค์ประกอบ:
data-hover = "dropdown"
กรอกรหัสองค์ประกอบ HTML:
คัดลอกรหัสดังนี้: <a href = "JavaScript:;" data-toggle = "ดรอปดาวน์" data-hover = "dropdown"> </a>
ตัวเลือกสามารถตั้งค่าผ่านแอตทริบิวต์ข้อมูลหรือผ่านข้อมูลล่าช้าและข้อมูล Close-Close
คัดลอกรหัสดังนี้: <a href = "#" data-toggle = "dropdown" data-hover = "dropdown" data-delay = "1000" data-close-yothers = "false"> </a>
แน่นอนว่ายังมีวิธีที่ง่ายที่สุดซึ่งก็คือการใช้ CSS Hover เพื่อควบคุม
[/code] .nav> li: hover .dropdown-menu {display: block;} [/code]
รหัสประเภทนี้ยังสามารถบรรลุเอฟเฟกต์โฮเวอร์ที่ต้องการได้ แต่ถ้าคุณคลิกที่ส่วนประกอบเมื่อโฮเวอร์และจากนั้นไปที่องค์ประกอบอื่นเพื่อโฮเวอร์เอฟเฟกต์ต่อไปนี้จะปรากฏขึ้น:
หากคุณยังต้องการเรียนรู้อย่างลึก
ด้านบนเป็นวิธีการใช้ส่วนประกอบแบบดรอปดาวน์ bootstrap ที่คุณแบ่งปันกับคุณ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณที่จะควบคุมเหตุการณ์โฮเวอร์