Bootstrap JS Dropdown

คลาส CSS แบบเลื่อนลง

สำหรับบทแนะนำเกี่ยวกับ Dropdowns โปรดอ่านBootstrap Dropdowns Tutorialของเรา

Class	Description	Example
`.dropdown`	Indicates a dropdown menu
`.dropdown-item`	Style links inside the dropdown menu with proper padding etc
`.dropdown-item-text`	Style text or text links inside the dropdown menu with proper padding etc
`.dropdown-menu`	Builds the dropdown menu
`.dropdown-menu-right`	Right-aligns a dropdown menu
`.dropdown-header`	Adds a header inside the dropdown menu
`.dropup`	Indicates a dropup menu
`.disabled`	Disables an item in the dropdown menu
`.active`	Styles the active element in a dropdown menu
`.divider`	Separates items inside the dropdown menu with a horizontal line

เพิ่มdata-toggle="dropdown"ในลิงก์หรือปุ่มเพื่อสลับเมนูแบบเลื่อนลง

<button type="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</button>

เปิดใช้งานด้วยตนเองด้วย:

$('.dropdown-toggle').dropdown();

หมายเหตุ:จำเป็นต้องใช้แอตทริบิวต์ data-toggle="dropdown" ไม่ว่าคุณจะเรียกใช้เมธอด dropdown() หรือไม่

None

ตารางต่อไปนี้แสดงวิธีการดรอปดาวน์ที่มีอยู่ทั้งหมด

Method	Description	Try it
.dropdown("toggle")	Toggles the dropdown. If set, it will open the dropdown menu by default
.dropdown("update")	Updates the position of an element's dropdown
.dropdown("dispose")	Destroys an element's dropdown

ตารางต่อไปนี้แสดงรายการเหตุการณ์แบบเลื่อนลงที่มีอยู่ทั้งหมด

Event	Description	Try it
show.bs.dropdown	Occurs when the dropdown is about to be shown.
shown.bs.dropdown	Occurs when the dropdown is fully shown (after CSS transitions have completed)
hide.bs.dropdown	Occurs when the dropdown is about to be hidden
hidden.bs.dropdown	Occurs when the dropdown is fully hidden (after CSS transitions have completed)

เคล็ดลับ:ใช้ jQuery's event.relatedTarget เพื่อรับองค์ประกอบที่เรียกดรอปดาวน์:

$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});