เมื่อใช้ส่วนประกอบ Bootstrap Navigation Bar หากแถบการนำทางของคุณมีเมนูแบบเลื่อนลงมาจากนั้นการนำทางด้วยเมนูแบบเลื่อนลงนี้จะลอยเมนูแบบเลื่อนลงเมื่อคลิก แอตทริบิวต์ HREF ของตัวเองจะไม่ถูกต้องซึ่งหมายความว่ามันจะสูญเสียฟังก์ชั่นไฮเปอร์ลิงก์ นี่ไม่ใช่สิ่งที่ฉันต้องการ ฉันหวังว่าลิงก์ของแถบการนำทางสามารถเปิดลิงค์ได้ตามปกติ แต่มันก็ต้องการฟังก์ชั่นเมนูแบบเลื่อนลงและเริ่มโยน ~
ก่อนอื่นให้แก้ปัญหาการคลิกที่แถบการนำทางด้วยเมนูแบบเลื่อนลง เอฟเฟกต์เมนูแบบเลื่อนลงถูกนำไปใช้โดย JS การวิเคราะห์ไฟล์ bootstrap.js แสดงให้เห็นว่า bootstrap เขียนเมนูดรอปดาวน์เป็นปลั๊กอิน jQuery และพบประโยคคีย์บางส่วนในส่วนรหัสดรอปดาวน์:
// นำไปใช้กับองค์ประกอบแบบเลื่อนลงมาตรฐาน // ======================================================== $ (เอกสาร) Form ', function (e) {E.StopPropagation ()}). on (' click.bs.dropdown.data-api ', สลับ, dropdown.prototype.toggle) .on (' keydown.bs.dropdown.data-api ', toggle +'หลังจากค้นหารหัสคีย์สองสามรหัสฉันคิดถึงวิธีแก้ปัญหา เพียงปิดเหตุการณ์ click.bs.dropdown.data-api แล้วก็จะโอเค รหัสมีดังนี้:
$ (เอกสาร) .ready (function () {$ (เอกสาร) .off ('click.bs.dropdown.data-api');});การทดสอบรหัสข้างต้นมีผลบังคับใช้ แถบการนำทางสามารถคลิกเพื่อแก้ปัญหา ต่อไปนี้คือการแก้ปัญหาของเมนูเมาส์โฮเวอร์และเมนูแบบดึงลง นี่ค่อนข้างง่าย มันสามารถนำไปใช้กับกิจกรรมเมาส์ของ JQuery รหัสมีดังนี้:
$ (เอกสาร) .ready (function () {dropdownopen (); // call});/*** ขยายเมนูย่อยเมื่อเมาส์ผ่านผ่านดังนั้นไม่ต้องคลิกเพื่อขยาย*/ฟังก์ชั่น dropdownopen () {var $ dropdownli = $ ('li.dropdown'); $ dropdownli.mouseoverli {$ (this) .addclass ('Open');}). mouseout (function () {$ (this) .removeClass ('Open');});}ด้านบนเป็นรหัสการใช้งานสำหรับแถบการนำทาง bootstrap ที่สามารถคลิกและวางตัวเพื่อแสดงเมนูแบบเลื่อนลง ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!