القوائم المنسدلة

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> زر القائمة المنسدلة </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> </ul> </div>

<!-- قائمة منسدلة أساسية --> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"> أساسي </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div> <!-- قائمة منسدلة برابط --> <div class="dropdown"> <a class="btn btn-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> رابط منسدل </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div>

<!-- منسدلة للأعلى --> <div class="dropup"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> منسدلة للأعلى </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div> <!-- منسدلة لليمين --> <div class="dropend"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> منسدلة لليمين </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div> <!-- منسدلة لليسار --> <div class="dropstart"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> منسدلة لليسار </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div>

<!-- محاذاة لليمين --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة محاذاة لليمين </button> <ul class="dropdown-menu dropdown-menu-end"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div> <!-- محاذاة استجابية --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> محاذاة استجابية </button> <ul class="dropdown-menu dropdown-menu-lg-end"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div>

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة منسدلة </button> <ul class="dropdown-menu"> <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> <li><hr class="dropdown-divider"></li> <li><h6 class="dropdown-header">رأس آخر</h6></li> <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li> </ul> </div>

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة منسدلة </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">رابط عادي</a></li> <li><a class="dropdown-item active" href="#">رابط نشط</a></li> <li><a class="dropdown-item disabled" href="#">رابط معطل</a></li> </ul> </div>

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> نموذج منسدل </button> <form class="dropdown-menu p-4"> <div class="mb-3"> <label for="exampleDropdownFormEmail" class="form-label"> البريد الإلكتروني </label> <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com"> </div> <div class="mb-3"> <label for="exampleDropdownFormPassword" class="form-label"> كلمة المرور </label> <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="كلمة المرور"> </div> <div class="mb-3"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="dropdownCheck"> <label class="form-check-label" for="dropdownCheck"> تذكرني </label> </div> </div> <button type="submit" class="btn btn-primary">تسجيل الدخول</button> </form> </div>

<div class="btn-group"> <button type="button" class="btn btn-primary">إجراء</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">تبديل القائمة المنسدلة</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">رابط منفصل</a></li> </ul> </div>

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة منسدلة داكنة </button> <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item active" href="#">إجراء نشط</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">رابط منفصل</a></li> </ul> </div>

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة منسدلة </button> <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;"> <p> بعض النص النموذجي المتدفق بحرية داخل القائمة المنسدلة. </p> <p class="mb-0"> وهذا المزيد من النص النموذجي. </p> </div> </div>

<!-- إغلاق عند النقر الخارجي (افتراضي) --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true"> قائمة منسدلة افتراضية </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">عنصر القائمة</a></li> </ul> </div> <!-- إغلاق عند النقر الداخلي --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside"> قابل للنقر من الداخل </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">عنصر القائمة</a></li> </ul> </div> <!-- إغلاق يدوي --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false"> إغلاق يدوي </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">عنصر القائمة</a></li> </ul> </div>

// تهيئة القائمة المنسدلة const dropdownElement = document.getElementById('myDropdown'); const dropdown = new bootstrap.Dropdown(dropdownElement); // عرض القائمة المنسدلة dropdown.show(); // إخفاء القائمة المنسدلة dropdown.hide(); // تبديل القائمة المنسدلة dropdown.toggle(); // تحديث موضع القائمة المنسدلة dropdown.update(); // التخلص من القائمة المنسدلة dropdown.dispose(); // الاستماع للأحداث dropdownElement.addEventListener('show.bs.dropdown', event => { console.log('القائمة المنسدلة على وشك أن تظهر'); }); dropdownElement.addEventListener('shown.bs.dropdown', event => { console.log('تم عرض القائمة المنسدلة'); }); dropdownElement.addEventListener('hide.bs.dropdown', event => { console.log('القائمة المنسدلة على وشك أن تختفي'); }); dropdownElement.addEventListener('hidden.bs.dropdown', event => { console.log('تم إخفاء القائمة المنسدلة'); });