Скрытие меню Bootstrap на мобильных при клике на категорию

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

Если требуется закрыть навигационную панель Bootstrap после нажатия на элемент меню, то для этого следует воспользоваться данным скриптом, добавляющим обработчик события нажатия на ссылки в навигаторе:

$('.navbar-nav').on('click', 'li a', () => $('.navbar-collapse').collapse('hide'));

После нажатия на любой элемент a внутри .navbar-nav, будет вызван метод .collapse('hide') для элемента с классом .navbar-collapse. Таким образом, пользователи смогут без препятствий продолжать навигацию по сайту.

Адаптация к различным версиям Bootstrap

Управление раскрывающимся компонентом имеет свои особенности в раздиличных версиях Bootstrap, таких как Bootstrap 3 и Bootstrap 4. Именно по этой причине рекомендуется изучить раздел collapse.js в документации к своей версии Bootstrap.

data-toggle и data-target в Bootstrap

Для достижения целевого поведения порой достаточно использовать HTML-атрибуты data-toggle и data-target. В этом случае нам будет не нужно писать JS-скрипты:

<a href="#section" data-toggle="collapse" data-target=".navbar-collapse.show">Ссылка</a>

Таким образом, функциональность Bootstrap будет включена напрямую, без применения JavaScript.

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

Реализация плавной навигации

Очень важно обеспечить естественную прокрутку при работе с одностраничными сайтами. Вот пример кода, который поможет справиться с данной задачей:

$('.navbar-nav a').click(function(event) {
  if ($(this).attr('data-toggle') !== 'collapse') {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 500);
  }
  $('.navbar-collapse').collapse('hide');
});

Сохранение совместимости

Важно обеспечить правильную работу скриптов на всех версиях Bootstrap, правильно выбирая селекторы jQuery:

// Для Bootstrap 3
$('.navbar-nav').on('click', 'li a', () => $('.navbar-collapse.in').collapse('hide'));

// Для Bootstrap 4
$('.navbar-nav').on('click', 'li a', () => $('.navbar-collapse.show').collapse('hide'));

Учет специфических случаев

Проверка до сворачивания

Перед сворачиванием проверьте, открыта ли панель навигации, чтобы избежать ненужных манипуляций с DOM:

$('.nav a').on('click', function() {
  if ($('.navbar-toggle').css('display') != 'none') {
    $(".navbar-toggle").trigger("click");
  }
});

Адаптивное поведение

Убедитесь, что ваше решение функционирует корректно на устройствах с разным разрешением экрана и поддерживает адаптивность Bootstrap.

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

Попробуем визуализировать процесс сворачивания навигации в Bootstrap после клика:

Представим себе театральный занавес (🎭), который открывает наше меню навигации:

🎭 = [Пункт Меню 1, Пункт Меню 2, Пункт Меню 3]

После клика по пункту меню:

Клик: [Пункт Меню 1] 🐦 -> 🍂

Занавес (🎭) грациозно скрывает меню.

После клика: [🎭] // Меню скрыто

Это обеспечивает аккуратный пользовательский интерфейс без лишних элементов сразу после выбора пользователем.

Расширенное визуальное взаимодействие и устранение неполадок

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

Для того чтобы контролировать поведение динамических элементов страницы, полезно понять концепцию делегирования событий.

$(document).on('click', '.navbar-nav li a', function() {
  $('.navbar-collapse').collapse('hide');
});

Работа с динамическим контентом

На платформах с динамической загрузкой контента (например, Angular или React) восстанавливайте обработчики событий после каждого обновления DOM, используя хуки жизненного цикла или useEffect.

Приоритет доступности

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

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

1. Navbar · Bootstrap — Документация Bootstrap о компоненте навигационной панели.
2. jQuery API Documentation — Руководство по работе с методами jQuery и обработке событий.
3. Understanding Event Delegation | jQuery Learning Center — Объяснение делегирования событий в jQuery.
4. CSS Selectors Reference — Интерактивное руководство по CSS-селекторам.
5. css – How to hide collapsible Bootstrap navbar on click – Stack Overflow — Обсуждение с практическими рекомендациями по сворачиванию навигационной панели на Stack Overflow.
6. Element: classList property – Web APIs | MDN — Информация о свойстве classList для управления классами CSS при обработке события клика в документации MDN.