บท เมนูแบบดรอปดาวน์ Bootstrap อธิบายเมนูแบบเลื่อนลง แต่ไม่เกี่ยวข้องกับส่วนการโต้ตอบ บทนี้จะอธิบายการโต้ตอบของเมนูแบบเลื่อนลงอย่างละเอียด การใช้ปลั๊กอินแบบเลื่อนลงคุณสามารถเพิ่มเมนูดรอปดาวน์ลงในส่วนประกอบใด ๆ (เช่นแถบการนำทางแท็บเมนูนำทางแคปซูลปุ่ม ฯลฯ )
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง Dropdown.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. การใช้งาน
คุณสามารถสลับเนื้อหาที่ซ่อนอยู่ของปลั๊กอินเมนูแบบเลื่อนลง (ดรอปดาวน์):
1. ใช้แอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "ดรอปดาวน์" ไปยังลิงค์หรือปุ่มเพื่อสลับเมนูแบบเลื่อนลงดังที่แสดงด้านล่าง:
<div> <a data-toggle = "dropdown" href = "#"> ทริกเกอร์แบบเลื่อนลง </a> <ul role = "เมนู" aria-labelledby = "dlabel"> ... </ul> </div>
หากคุณต้องการให้ลิงก์ยังคงอยู่ (มีประโยชน์เมื่อเบราว์เซอร์ไม่เปิดใช้งาน JavaScript) ให้ใช้คุณสมบัติข้อมูลเป้าหมายแทน HREF = "#":
<div> <a id = "dlabel" role = "ปุ่ม" data-toggle = "dropdown" data-target = "#" href = "/page.html"> เมนูแบบเลื่อนลง (แบบเลื่อนลง) <span> </span> </a>
2. ผ่าน JavaScript: หากต้องการสลับผ่าน JavaScript โปรดใช้วิธีการต่อไปนี้:
$ ('. dropdown-toggle'). dropdown ()
2. ตัวอย่างง่าย ๆ ของเมนูแบบเลื่อนลง
ในการใช้งานทั่วไปรหัสนั้นเหมือนกับวิธีการส่วนประกอบ:
// การใช้งานการประกาศ <div> <ปุ่ม data-toggle = "dropdown"> เมนูแบบเลื่อนลง <pan> </span> </button> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#"> ผลิตภัณฑ์ </a> </li> href = "#"> เกี่ยวกับ </a> </li> </ul> </div>
หลักสำคัญของการใช้งานประกาศ:
1. ใช้แพ็คเกจสำหรับคอนเทนเนอร์อุปกรณ์ต่อพ่วง
2. การเชื่อมโยง data-toggle = "dropdown" สำหรับเหตุการณ์การคลิกภายใน
3. ใช้องค์ประกอบเมนู
// ถ้าปุ่มอยู่นอกคอนเทนเนอร์ก็สามารถผูกมัดผ่านเป้าหมายข้อมูล <button id = "btn" data-toggle = "dropdown" data-target = "#dropdown"> ในการโทร JavaScript ไม่มีคุณสมบัติและวิธีการไม่ง่ายต่อการใช้งาน ต่อไปนี้เป็นสี่เหตุการณ์พื้นฐาน // วิธีเมนูแบบหล่นลง แต่ยังต้องการข้อมูล-*$ ('#btn'). dropdown (); $ ('#btn'). แบบเลื่อนลง ('สลับ');เมนูแบบเลื่อนลงรองรับกิจกรรม 4 ชนิดที่สอดคล้องกับก่อนป๊อปอัพหลังป๊อปอัพก่อนปิดและหลังปิด
// events, อื่น ๆ ที่คล้ายกัน $ ('#dropdown'). on ('show.bs.dropdown', function () {Alert ('freaks ทันทีเมื่อวิธีการแสดงถูกเรียก!');});3. การใช้เมนูแบบเลื่อนลงในหน้าแท็บ
<! doctype html> <html> <head> <head> <title> อินสแตนซ์ bootstrap - หน้าแท็กพร้อมเมนูแบบเลื่อนลง </title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "/scripts/jquery.min.min.min src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p> หน้าแท็กพร้อมเมนูแบบเลื่อนลง </p> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> href = "#"> ios </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "dropdown" href = "#"> java <span> href = "#"> jmeter </a> </li> <li> <a href = "#"> ejb </a> </li> <li> <a href = "#"> ลิงก์ที่ลงนาม </a> </li> </li> </li> <li>
ภาพการทำซ้ำ:
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน