Авто выпадение меню и возможность кликать на категории в Bootstrap 4 меню

Небольшой лайфхах о том как сделать авто выпадение меню и возможность кликать на категории в меню Bootstrap 4.

Решение 1 — на css

Для этого из разметки нужно удалить

data-toggle="dropdown"

и добавить следующие css стили:

@media (min-width: 768px) {.dropdown:hover .dropdown-menu{margin-top:0;display:block}}

Решение 2 — на js

также как и в первом случае удаляем data-toggle="dropdown" и добавляем js:

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
      _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

/* not needed, prevents page reload for SO example on menu link clicked */
$('.dropdown a').on('click tap', e => e.preventDefault())

Демо