Решаем проблему с Bootstrap dropdown: не работает меню

Быстрый ответ

Убедитесь в корректности подключения CSS и JS-файлов Bootstrap. Кнопка button и контейнер меню div должны содержать соответствующие классы Bootstrap. Для кнопки актуален атрибут data-toggle="dropdown" в Bootstrap 4 и data-bs-toggle="dropdown" для Bootstrap 5. Ниже представлен пример базовой реализации:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false">
    Выпадающее меню
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Действие</a>
    <!-- Остальные элементы меню -->
  </div>
</div>
<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

В Bootstrap 5 не требуется jQuery и Popper.js. Замените data-toggle на data-bs-toggle.

Структура HTML

Неполадки, как правило, связаны с ошибками в структуре HTML-документа. Проверьте, что у кнопки button заявлены классы .btn и .dropdown-toggle, а также атрибуты data-toggle или data-bs-toggle в зависимости от версии Bootstrap.

Порядок размещения тегов скриптов

Не стоит забывать о важности порядка скриптов в документе, поскольку компоненты Bootstrap зависят от jQuery. jQuery должна подключаться до скрипта Bootstrap.

Избегайте конфликтов скриптов

Повторение скриптов может вызывать конфликты. Подключите только одну копию bootstrap.min.js.

Проверка совместимости версий

Проверьте совместимость версий jQuery и Bootstrap. Если меню не работает, возможно, причина в несовместимости версий. Если вы используете bootstrap.js, удалите bootstrap-dropdown.js.

Ошибки в консоли? Целостность? Кросс-доменные запросы?

Следите за ошибками JavaScript в консоли браузера. Даже малейшие синтаксические ошибки или проблемы с файлами могут привести к нарушению функционирования выпадающего меню. Проверьте корректность использования атрибутов integrity и crossorigin при использовании CDN.

Визуализация

Простой способ понять проблему в функционировании выпадающего меню Bootstrap:

Представьте:
🔑 = Триггер для выпадающего меню Bootstrap (data-toggle)
🔋 = JavaScript/jQuery (Подключены ли они корректно?)
🚗 = Браузер пользователя

Если в брелоке автомобиля (🔑) села батарейка (🔋❌), функция дистанционного управления станет недоступной, верно?

Аналогичная ситуация и с выпадающим меню Bootstrap:

1. jQuery (🔋) подключена некорректно или после JS Bootstrap
2. Присутствуют ошибки JavaScript в консоли
3. Ошибки в задании атрибутов триггера (🔑)

"Брелок" (🔑) и "батарейка" (🔋) нуждаются в правильной настройке для дистанционного управления машиной (🚗)!

Правильная обработка событий и готовность документа

В некоторых случаях решением может стать корректная инициализация выпадающего меню, особенно, если в коде используется свой jQuery в функции готовности документа.

Минимизация конфликтов с другими библиотеками

Обратите внимание на потенциальные конфликты с другими JavaScript-библиотеками. В таких случаях может быть полезен метод jQuery.noConflict().

Преимущества использования последних возможностей

Для доступа к новейшим возможностям и исправлениям используйте последнюю версию Bootstrap. В противном случае могут возникнуть проблемы совместимости с обновляющимися браузерами или JavaScript-стандартами.

Полезные материалы

1. Dropdowns · Bootstrap v5.0
2. jQuery
3. Popper
4. Bootstrap Dropdowns на сайте W3Schools
5. MDN – Delegating events
6. CSS-Tricks
7. Отладка JavaScript на сайте Chrome Developers