Bootstrap JS Dropdown

Dropdown CSS Classes

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"dropdown menu ကိုပြောင်းရန် လင့်ခ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုသို့ ထည့်ပါ ။

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

ကိုယ်တိုင်ဖွင့်ပါ-

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

မှတ်ချက်- သင် dropdown() နည်းလမ်းကို ခေါ်သည်ဖြစ်စေ data-toggle="dropdown" attribute လိုအပ်ပါသည်။

None

အောက်ဖော်ပြပါဇယားတွင် ရရှိနိုင်သော dropdown နည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။

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

အောက်ဖော်ပြပါ ဇယားတွင် ရရှိနိုင်သော 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)

အကြံပြုချက်- dropdown ကို အစပျိုးသည့် ဒြပ်စင်ကို ရယူရန် jQuery ၏ event.relatedTarget ကို အသုံးပြုပါ-

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