बूटस्ट्रैप जे एस ड्रॉपडाउन
ड्रॉपडाउन सीएसएस क्लासेस
ड्रॉपडाउन के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप ड्रॉपडाउन ट्यूटोरियल पढ़ें ।
| 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();
नोट: डेटा-टॉगल = "ड्रॉपडाउन" विशेषता आवश्यक है, भले ही आप ड्रॉपडाउन () विधि को कॉल करें या नहीं।
ड्रॉपडाउन विकल्प
| 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 के event .संबंधित लक्ष्य का उपयोग करें:
उदाहरण
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});