Dropdown Bootstrap JS

Kelas CSS Dropdown

Untuk tutorial tentang Dropdown, baca Tutorial Dropdown Bootstrap kami .

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

Tambahkan data-toggle="dropdown"ke tautan atau tombol untuk mengaktifkan menu tarik-turun.

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

Aktifkan secara manual dengan:

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

Catatan: Atribut data-toggle="dropdown" diperlukan terlepas dari apakah Anda memanggil metode dropdown().

None

Tabel berikut mencantumkan semua metode dropdown yang tersedia.

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

Tabel berikut mencantumkan semua peristiwa tarik-turun yang tersedia.

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)

Tip: Gunakan event.relatedTarget jQuery untuk mendapatkan elemen yang memicu dropdown:

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