Активация выпадающего меню Bootstrap на Hover, а не Click

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

Если желаете добавить в Bootstrap dropdown-меню возможность открытия при наведении курсора, примените следующий фрагмент JavaScript. Он задействует класс .dropdown, прибавляя и исключая класс show при событиях hover:

document.querySelectorAll('.dropdown').forEach(dropdown => {
  dropdown.addEventListener('mouseenter', () => {
    dropdown.classList.add('show');
    dropdown.querySelector('.dropdown-menu').classList.add('show');
  });
  dropdown.addEventListener('mouseleave', () => {
    dropdown.classList.remove('show');
    dropdown.querySelector('.dropdown-menu').classList.remove('show');
  });
});

Данный подход основан на используемом vanilla JavaScript имеющим синтаксис ES6. Применение этого метода не предполагает подключения jQuery, что делает ваш код более компактным и лаконичным, а dropdown-меню – более интерактивным без дополнительных кликов.

CSS: владение наведением

Если вы отдаёте предпочтение CSS, следующий код даст вам полное управление над отображением dropdown-меню, элегантно обрабатывая состояния наведения:

.dropdown:hover .dropdown-menu {
  display: block;
}

Этот CSS-фрагмент делает dropdown-меню видимым при наведении курсора. Чтобы избежать неожиданных закрытий меню, старайтесь минимизировать промежутки между dropdown-ссылкой и самим меню, установив свойство display в значение "block".

Функциональность на различных устройствах

Обратите внимание на корректную работу решения на разнотипных устройствах и в разных браузерах. Важно не забывать о необходимости корректировки для сенсорных экранов, которые по умолчанию не поддерживают hover-событие. Таким образом, классический способ нажатия должен остаться рабочим.

Подробнее об этом расскажет наш спикер на видео

Сознательная доступность

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

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

Представьте себе Dropdown в Bootstrap как сокровищную шкатулку, которую нужно раскрыть:

Наведение мышью на шкатулку: 🛳 ➡️ 🖱 ➡️ 👑

Когда пользователь-капитан наводит курсор на шкатулку, она открывается, давая доступ к ценным элементам dropdown:

Без наведения: 👑🔒   При наведении: 👑💰[Элемент 1, Элемент 2, Элемент 3]

Эффект hover позволяет раскрывать dropdown-элементы без необходимости делать дополнительных кликов, предоставляя быстрый и удобный доступ.

Улучшение UX с помощью jQuery

Привлекая jQuery, можно ещё более углубить пользовательский опыт, добавив класс show к dropdown-меню при наведении:

$(document).ready(function(){
  $('.dropdown').hover(
    function() {
      $(this).addClass('show').attr('aria-expanded', "true");
      $(this).find('.dropdown-menu').addClass('show');
    }, function() {
      $(this).removeClass('show').attr('aria-expanded', "false");
      $(this).find('.dropdown-menu').removeClass('show');
    }
  );
});

События mouseenter и mouseleave выполняют основную функцию. Aria-expanded используется для доступности. Примените stop(), чтобы исключить накопление анимаций и учтите использование delay(), fadeIn() и fadeOut() для совершения более заметных эффектов dropdown.

Плавные переходы и задержки

Добавление небольшого отложенного действия предотвратит мгновенное скрытие dropdown-меню:

$('.dropdown').hover(
  function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
  }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut();
  }
);

Этот код применяет задержку в 100 миллисекунд до появления или исчезновения меню, обеспечивая более плавный эффект. Всегда тестируйте свой код на различных устройствах для сохранения единообразного поведения.

Проследить и обуздать кликовое событие Bootstrap

Расширяя функциональность Bootstrap dropdown с помощью hover-событий, не откажитесь от кликовых событий. Используйте mouseenter в jQuery, чтобы обеспечить кооперацию возможностей Bootstrap и применяемого улучшения.

Ценность оригинального дизайна

Соблюдение принципов Bootstrap и расширение их функционала поможет поддерживать ваш код в актуальном состоянии.

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

1. Dropdowns · Bootstrap v5.0 — официальная документация Bootstrap по dropdown-компонентам.
2. :hover | CSS-Tricks — подробное руководство по использованию псевдокласса :hover в CSS.
3. Element: mouseenter event – Web APIs | MDN — информация о событии mouseenter в JavaScript.
4. Element: mouseleave event – Web APIs | MDN — описание события mouseleave.
5. jQuery API Documentation — документация по методу .hover() в jQuery.
6. CSS :hover Selector — применение селектора :hover в CSS с примерами.
7. Date picker deosnt pop up – JavaScript – SitePoint Forums — обсуждение настройки dropdown-меню в Bootstrap, которое также применимо для hover-состояний.