เมื่อเร็ว ๆ นี้ บริษัท ใช้ฟังก์ชั่นเมนู bootstrap เพื่อสร้างหน้าเว็บ จำเป็นต้องวางเมาส์เพื่อแสดงเมนูรองดังนั้นฉันจึงศึกษาและพบว่าอาจมีสองวิธี
วิธีแรก: แก้ไขแผ่นสไตล์
ในความเป็นจริงมันค่อนข้างง่าย คุณจะต้องเพิ่ม CSS เพื่อตั้งค่าสถานะของโฮเวอร์และตั้งค่าเมนูแบบเลื่อนลงเพื่อบล็อก สำหรับ CSS เฉพาะ:
การคัดลอกรหัสมีดังนี้:
.nav> li: Hover .dropdown-Menu {display: block;}
ประโยคนี้จะถูกเพิ่มเข้าไปใน CSS ที่ปรากฏหลังจาก bootstrap.min.css ลองดู!
ข้อบกพร่อง:
1. ไม่สามารถคลิกเมนูด้านบนที่สอดคล้องกันได้
2. หลังจากเมาส์เลื่อนไปยังเมนูรองเมนูด้านบนไม่มีสไตล์
วิธีที่สอง: ใช้คุณสมบัติของ jQuery เพื่อนำไปใช้
เมื่อรวมกับบทเรียนออนไลน์สองเหตุการณ์ใน jQuery สามารถแก้ปัญหาได้ สำหรับ CSS เฉพาะ:
การคัดลอกรหัสมีดังนี้:
// ปิดเหตุการณ์ click.bs.dropdown.data-api เพื่อให้เมนูด้านบนคลิกได้
$ (เอกสาร) .off ('click.bs.dropdown.data-api');
// Origin โดยอัตโนมัติ
$ ('. nav .dropdown'). mouseenter (function () {
$ (นี่) .addclass ('เปิด');
-
//ต้นฉบับ
$ ('. nav .dropdown'). Mouseleave (function () {
$ (นี่) .removeclass ('เปิด');
-
วิธีนี้ไม่เพียง แต่อนุญาตให้คุณคลิกที่เมนูด้านบน แต่ยังไม่สูญเสียสไตล์ แต่ยังแก้ปัญหาของ bootstrap mouse ที่โฉบ ขอแนะนำให้ทุกคน