Если вы перешли на эту статью не с «Выпадающее меню на Bootstrap 4 при наведении (событие hover)», то я рекомендую ознакомиться с ней, прежде чем продолжить изучать эту.
Стандартный dropdown-меню список раскрывается только при нажатии на главный пункт меню. При этом перейти на главное меню, по которому происходит действие click, не предоставляется возможным.
В меню Bootstrap 4, на главном меню раскрывающегося списка вешается атрибут «data-toggle="dropdown"», который устанавливает JQeury методы «event.stopPropagation()» и «event.preventDefault()».
event.stopPropagation() — предотвращает дальнейшую передачу текущего события, вверх по иерархии дерева DOM (некоторые события, такие как click, после выполнения на самом элементе, передают его родительским, что повторяется до самого основания дерева DOM).
event.preventDefault() — отменяет действие события по умолчанию. Если этот метод вызывается, то действие события по умолчанию не будет срабатывать. Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.
Вот и получается, что при нажатии на ссылку меню, эти методы блокируют переход по ссылке в стандартном тому понимании.
Используя опыт и наработки предыдущей статьи, сделаем, чтобы список раскрывался только при наведении, и отключим событие click.
Отключаем событие click на выпадающем меню Bootstrap 4
Как уже понятно из выше сказанного, атрибут «data-toggle="dropdown"» блокирует переход по ссылке и одновременно указывает, что это кнопка раскрывающего списка. Просто удаляем наш атрибут из ссылки и проверяем.
Было:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Три один</a>
<a class="dropdown-item" href="#">Три два</a>
<a class="dropdown-item" href="#">Три три</a>
</div>
</li>
Стало:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">Три</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Три один</a>
<a class="dropdown-item" href="#">Три два</a>
<a class="dropdown-item" href="#">Три три</a>
</div>
</li>
Теперь наше раскрывающееся меню работает только при наведении. При нажатии на главный пункт меню мы теперь можем перейти на отдельную страницу.
Данную работу меню, я лично считаю более правильной. На многих проектах, мне хочется задействовать этот главный пункт, чтобы он работал и перенаправлял пользователей на отдельную страницу. С которой уже, в свою очередь, я смогу предоставить навигацию на остальные подпункты меню или задействую как SEO или OFFER страницу.
Всем удачи!
