บทความนี้อธิบายถึงผลกระทบของเมนูแบบเลื่อนลงของ JS Simulation Bootstrap แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
จำลองเมนูแบบเลื่อนลงของ Bootstrap
หากต้องการลดเอฟเฟกต์ในงานของคุณ: คลิกที่แถบการนำทางเมนูต่อไปนี้จะปรากฏขึ้น แต่เมื่อคลิกที่สถานที่อื่นเมนูย่อยจะถูกซ่อน
เนื่องจากรูปแบบของเมนูย่อย bootstrap แตกต่างจากการออกแบบคุณต้องเขียนเอฟเฟกต์ที่คล้ายกันด้วยตัวเอง
เมื่อคลิกการควบคุมเมนูแบบเลื่อนลงจะปรากฏขึ้น อย่างไรก็ตามจะถูกซ่อนไว้โดยอัตโนมัติได้อย่างไรเมื่อคลิกที่ว่าง?
ในตอนแรกฉันผูกเหตุการณ์ onclick เข้ากับร่างกาย เมื่อคลิกที่สถานที่ว่างเหตุการณ์การคลิกจะถูกกระตุ้นเนื่องจากการเดือดดาลของเหตุการณ์ อย่างไรก็ตามปัญหาคือเมื่อคลิกการควบคุมเหตุการณ์การคลิกร่างกายจะถูกทริกเกอร์ส่งผลให้เมนูแบบเลื่อนลงถูกดึงกลับหลังจากที่ปรากฏขึ้นดังนั้นแนวคิดนี้ไม่ถูกต้อง
เนื่องจาก Bootstrap ใช้ฟังก์ชั่นนี้ตรวจสอบซอร์สโค้ดและพบวิธีแก้ปัญหา:
ผูกเอกสาร (ซ่อนเมนูย่อย) และป้องกันการควบคุมจากฟองสบู่เมื่อทริกเกอร์วิธีการและป้องกันไม่ให้ทริกเกอร์การเชื่อมโยง
<!-แถบการนำทางกรอง-> <div style = "z-index: 999"> <div> <span onclick = "showorhideitem (เหตุการณ์นี้)"> หมวดหมู่ <span> </span> </span> target = "https://www.baidu.com"> <span> การดูแลทำความสะอาด </span> <span> </span> <span> </pan> </li> <li onclick = "jumpto (this)" target = "https://ww.baidu.com" onclick = "jumpto (this)" target = "https://www.baidu.com"> <span> ของขนม </span> <span> </span> <span> </pan> </li> </ul> </div> </div> data-show = "ซ่อน" style = "top: 100%; ซ้าย: 0px; z-index: 999; แสดง: ไม่มี"> <li onclick = "jumpto (this)" target = "https://www.baidu.com" target = "https://www.baidu.com"> <span> ผัก 1 </span> <span> </span> <span> </span> <span> </pan> </li> </ul> </div> </div> <div> <div onclick = "showsearch (เหตุการณ์นี้)"> <span> </span> </div> <!-แสดงกล่องค้นหา-> <div> <div style = "top: 58%; ขวา: 0px; z-index: 999; data-search = "ซ่อน"> <div> <div> <div style = "margin-right: 80px;"> <span style = "left: 0px; top: 0px;"> </span> <อินพุต placeholder = "search" onClick = "stopEvent 12px; "> ค้นหา </button> </div> </div> </div> </div> </div> </div> </div> </div> </dunction> $ (ฟังก์ชั่น () {// ผูกเหตุการณ์ $ (เอกสาร). บน (" คลิก ", ฟังก์ชัน () $ ("ul [data-show = 'show']") SlideUp ("slow");}); $ ("div [data-search = 'show']"). css ("แสดง", "ไม่มี"). css ("width", "32%");});}); var $ currentObj = $ (obj); // ซ่อนรายการดรอปดาวน์ทั้งหมด $ ("ul [data-show = 'show']"). ซ่อน (); // ล้างคลาสที่ใช้งานทั้งหมด $ currentobj.closest (". row") ค้นหา ("div.active"). RemoveClass ("active"); // เพิ่มสไตล์ที่เลือก $ currentobj.closest (". float_left"). addclass ("active") var $ ul = $ currentobj.closest ("div") ค้นหา ("ul"); // ul เป็นสถานะขยายถ้า ($ ul.data ("show") == "show") {$ ul.slideup ("slow"); $ ul.attr ("data-show", "ซ่อน"); } else {// ul เป็นสถานะขยาย $ ul.slidedown ("slow"); $ ul.attr ("data-show", "show"); // หยุดเหตุการณ์เหตุการณ์ฟองเหตุการณ์ stoppropagation (); }} // แสดงฟังก์ชั่นกล่องค้นหา showsearch (obj, เหตุการณ์) {var $ currentObj = $ (obj) .closest (". float_left") ค้นหา (". search_cont"). css ("แสดง", "บล็อก"); $ currentobj.animate ({width: "100%"}, 1,000); $ currentobj.attr ("การค้นหาข้อมูล", "show"); // หยุดเหตุการณ์เหตุการณ์ฟองเหตุการณ์ stoppropagation ();} ฟังก์ชั่น stopEvent (obj, เหตุการณ์) {// หยุดเหตุการณ์ Bubbles Event.stopPropagation ();} </script>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน