Сегодня 19.03.2024 г.
Ваш IP-адрес: 3.236.111.234

Выпадающее меню Bootstrap 4 на мобильной версии по нажатию

Рекомендую ознакомиться с предыдущими статьями по этой теме, прежде чем начинать изучать эту:

  1. Выпадающее меню на Bootstrap 4 при наведении (событие hover)

  2. Переход по ссылке главного (верхнего) меню раскрывающего списка в Bootstrap 4

Как я уже говорил в одной из предыдущих статей, что на мобильных устройствах не очень корректно работает свойство hover. А после удаления атрибута «data-toggle="dropdown"», у нас вообще ломается принцип работы меню на мобильных устройствах.

Если раскрыть меню кнопкой «гамбургер» мы еще можем, то проделать это с пунктом dropdown для раскрытия списка не предоставляется возможным. По нажатию, мы совершим переход на страницу.

Поэтому сразу встала задача:

  1. Вообще убрать любые «значки», которые бы показывали, что это меню можно раскрыть. Возможно, на некоторых проектах и подойдет.

  2. Сделать так, чтобы на ПК версии меню раскрывалось при наведении, а мобильных при нажатии.

Я нашел выход из этой проблемы с помощью JQeury:

<script>
 jQuery(document).ready(function($){
  $('.navbar-toggler').click(function(){
  $('.add-dropdown').attr("data-toggle", "dropdown"); 
  });
});
</script>

Метод .attr() — позволяет получить и изменить любой атрибут элемента у элемента.

Когда пользователь попал на мобильную версию, меню сжимается и превращается в кнопку «гамбургер». При нажатии на «гамбургер», к главному меню, которое раскрывает подменю, добавляется атрибут «data-toggle="dropdown"».

Таким образом, мы возвращаем удаленный атрибут и восстанавливаем стандартную работу Bootstrap 4 меню.

Если вы можете предложить свой вариант или указать на мои ошибки или дать рекомендацию, пожалуйста.

 

Всем удачи!

 

Добавить комментарий


Если у вас имеются вопросы по поводу работы сайта, сотрудничества и предложений, вы можете написать на почту info@alexfine.ru

Я создал первую версию блога и введу его с 2015 года.

Копирование материалов сайта возможно только с указанием активной ссылки «www.alexfine.ru» в качестве источника.

Изображение кнопки наверх