شرح صفوف ومحتوى الفقرة
عندما تضع حقول تصفية أو مربعات اختيار داخل القائمة المنسدلة، لا تريد أن تُغلق القائمة فور نقرة المستخدم الأولى بالداخل! هنا تبرز قوة السمة data-bs-auto-close التي تقبل أربع قيم دقيقة: true (الافتراضي: تُغلق بأي نقرة)، وoutside (تُغلق فقط عند النقر خارج القائمة)، وinside (تُغلق عند النقر بالداخل فقط)، وfalse (لا تُغلق إلا بزر المشغل أو برمجياً).
وللتحكم البرمجي الكامل في جافاسكريبت القياسية، استدعِ bootstrap.Dropdown.getOrCreateInstance(toggleBtn) لتنفيذ دوال .show() و.hide() و.update() مع الاستماع لأحداث shown.bs.dropdown وhidden.bs.dropdown.
<div class="dropdown d-inline-block">
<button id="fltBtn" type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
data-bs-auto-close="outside">
Clickable Inside</button>
<ul class="dropdown-menu p-2">
<li><span class="dropdown-item-text">Stay open</span></li>
</ul>
</div>مرجع كلاسات وسمات مكوّن Dropdowns
| الكلاس / السمة | العنصر المستهدف | الوظيفة القياسية في Bootstrap 5.3 |
|---|---|---|
.dropdown-toggle | زر الفتح | ينسق زر المشغل ويرسم سهم القائمة المنسدلة التلقائي. |
.dropdown-toggle-split | زر السهم المنقسم | يضبط حشو زر السهم المنفصل داخل .btn-group. |
.dropup / .dropend / .dropstart | الحاوية الأب | توجّه فتح القائمة للأعلى أو للنهاية أو للبداية منطقياً. |
.dropdown-menu-end | قائمة .dropdown-menu | تحاذي القائمة مع الحافة النهائية للزر بدلاً من البداية. |
data-bs-auto-close | زر .dropdown-toggle | تحدد متى تُغلق القائمة تلقائياً (true أو outside أو inside أو false). |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرّفت في هذا الدرس على بناء القوائم المنسدلة عبر Popper، وتصميم الأزرار المنقسمة .dropdown-toggle-split، والاتجاهات المنطقية .dropend و.dropstart، والمحاذاة والعناوين والفواصل، والتحكم بالإغلاق التلقائي عبر data-bs-auto-close وكائن bootstrap.Dropdown. الخطوة التالية: انتقل الآن إلى الدرس التالي لإتقان مكوّن اللوحات الجانبية المنزلقة Offcanvas وبناء الأدراج والقوائم المتجاوبة.