Bootstrap JS Dropdown

فئات CSS المنسدلة

للحصول على برنامج تعليمي حول القوائم المنسدلة ، اقرأ البرنامج التعليمي Bootstrap المنسدلة .

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" مطلوبة بغض النظر عما إذا كنت تستدعي طريقة () المنسدلة.

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)

نصيحة: استخدم event.relatedTarget الخاص بـ jQuery للحصول على العنصر الذي أدى إلى تشغيل القائمة المنسدلة:

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