Исправляем Bootstrap 3: меню не закрывается при клике

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

Чтобы в Bootstrap 3 выпадающее меню автоматически закрывалось после выбора пункта меню, применяется jQuery. Написанный ниже код, представленный для размещения после загрузки jQuery и Bootstrap, будет применим в отношении всех ссылок в меню, за исключением тех, что относятся к управлению выпадающими элементами:

// Данный код осуществляет закрытие меню после выбора ссылки
$('.navbar-collapse').on('click', 'a:not(.dropdown-toggle)', function() {
    $('.navbar-collapse').collapse('hide');
});

Устранение проблем

Удостоверьтесь, что в вашем проекте не происходит дублирование скриптов jquery.js и bootstrap.js, так как это может привести к конфликтам и неожиданному поведению меню. Особо обратите внимание на возможное взаимодействие с другим JavaScript-кодом, который может помешать функционированию данного решения.

Загадка атрибутов

В вашей якорной метке добавьте атрибуты data-toggle="collapse" и data-target=".navbar-collapse", и используйте их как инструменты пользовательского интерфейса. Они способствуют быстрому пониманию интерфейса и решают проблему самостоятельного закрытия меню.

Искусство владения клавиатурой

Для обеспечения адаптивности и стабильности вашего меню примените события jQuery внутри метода document ready. Это способствует непрерывности поведения меню ибо поможет избежать его мерцания при переключении различных состояний.

/*
Документ готов к работе над проблемами выпадающего меню
*/
$(document).ready(function() {
    $('.navbar-collapse').on('click', 'a:not(.dropdown-toggle)', function() {
        $('.navbar-collapse').collapse('hide');
    });
});

Однако будьте осторожны в случае наличия подменю. Убедитесь, что логика закрытия не затрагивает эти элементы.

Протестировать до совершенства

Детально протестируйте функционирование главного меню и подменю для соответствия ожиданной работе. Проведите специальное стресс-тестирование для проверки устойчивости работы меню.

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

/* 
Навигационная панель, которую закроете, только если захотите
*/

Что назначено: Выберете ссылку (открыть) -> Меню закрывается

[📖➡️📚] -> [🔒📖]

Возникла проблема: Выбор ссылки (открыть) -> Меню продолжает быть открытым

[📖➡️📚] -> [🔓📖]

Решение: Реализуем скрипт -> Скрипт работает автоматически -> Меню закрывается

[🔖] -> [📖➡️🔖➡️📚] -> [🔒📖]

Основная визуальная аналогия: Скрипт (бумажный заметка) помогает скрыть (закрыть) раскрытое меню.

Предвосхищение возможных неприятностей

Чтобы избежать обычных ошибок, связанных с реактивностью меню, внимательно проверьте классы меню. Они должны соответствовать рекомендациям Bootstrap, чтобы предотвратить мерцание. Будьте особенно внимательны при привязке событий при использовании внешних плагинов или собственных пользовательских скриптов.

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

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

1. Компоненты · Bootstrap – Официальная документация Bootstrap о Navbar.
2. JavaScript – Bootstrap закрывает реактивное меню "при клике" – Обсуждение на Stack Overflow с решениями для закрытия реактивного меню Bootstrap по клику.
3. Документация API jQuery – Руководство по использованию jQuery.
4. JavaScript · Bootstrap – Рекомендации по использованию сворачиваемых элементов в Bootstrap.
5. События | Учебный центр jQuery – Руководство по работе с событиями jQuery.
6. Введение в события – Обучение веб-разработке | MDN – Обучающий материал MDN по делегированию событий.
7. Навигационная панель Bootstrap – Урок от W3Schools о навигационной панели Bootstrap.