Рекомендую ознакомиться с предыдущими статьями по этой теме, прежде чем начинать изучать эту:
Выпадающее меню на Bootstrap 4 при наведении (событие hover)
Переход по ссылке главного (верхнего) меню раскрывающего списка в Bootstrap 4
Как я уже говорил в одной из предыдущих статей, что на мобильных устройствах не очень корректно работает свойство hover. А после удаления атрибута «data-toggle="dropdown"», у нас вообще ломается принцип работы меню на мобильных устройствах.
Если раскрыть меню кнопкой «гамбургер» мы еще можем, то проделать это с пунктом dropdown для раскрытия списка не предоставляется возможным. По нажатию, мы совершим переход на страницу.
Поэтому сразу встала задача:
Вообще убрать любые «значки», которые бы показывали, что это меню можно раскрыть. Возможно, на некоторых проектах и подойдет.
Сделать так, чтобы на ПК версии меню раскрывалось при наведении, а мобильных при нажатии.
Я нашел выход из этой проблемы с помощью JQeury:
<script>
jQuery(document).ready(function($){
$('.navbar-toggler').click(function(){
$('.add-dropdown').attr("data-toggle", "dropdown");
});
});
</script>
Метод .attr() — позволяет получить и изменить любой атрибут элемента у элемента.
Когда пользователь попал на мобильную версию, меню сжимается и превращается в кнопку «гамбургер». При нажатии на «гамбургер», к главному меню, которое раскрывает подменю, добавляется атрибут «data-toggle="dropdown"».
Таким образом, мы возвращаем удаленный атрибут и восстанавливаем стандартную работу Bootstrap 4 меню.
Если вы можете предложить свой вариант или указать на мои ошибки или дать рекомендацию, пожалуйста.
Всем удачи!
