Правильное адаптивное меню
 

Здравствуйте подскажите пожалуйста. Мне уже ранее помогли на этом форуме с адаптивным меню, но оно не совсем правильно работает, вот код меню:

$('.menu__list').on('mouseleave mouseenter click', function (e) {
    if( e.relatedTarget === null && e.type !== 'click' ) return;
    $('.middleMenu__drop').slideToggle(100);
});

<ul class="wrap middleMenu">
<li class="menu__list first"><a>Каталог</a>
	<ul class="middleMenu__drop" style="display: block;">
		<li><a href="#">Туфли</a></li>
		<li><a href="#">Босоножки</a></li>
		<li><a href="#">Кеды</a></li>
		<li><a href="#">Кросcовки</a></li>
		<li><a href="#">Ботинки демисезон</a></li>
		<li><a href="#">Сапоги демисезон</a></li>
	</ul>
</li>
<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>

Но это меню выходит дерганым, если мышкой наводить и уводить, его можно сломать и заставить работать наоборот, так же как если при обновлении страницы курсор мышки навести на меню и заставить его выпасть.
Хотелось бы правильно реализовать меню вероятно это нужно делать через slideDown и slideUp, я нашел вот такой кусок когда:

$(document).ready(function () {
 
  $('.vert-nav li').hover(
    function() {
      $('ul', this).slideDown(110);
    },
    function() {
      $('ul', this).slideUp(110);
    }
  );
 
});

Но тут при неведение только работает, я так понимаю что неправильно вызывать для каждого события одну и туже функцию, хотелось бы передать список событий через .on, то в примере с .hover в качестве параметров передано две функции slideDown и slideUp, в .on не получается просто передать две функции после перечня событий, подскажите как правильно реализовать данный момент?

Tipylja,
другого выхода, как оставить только клик, не вижу.

$('.menu__list').on('mouseenter', function (e) {
    $('.middleMenu__drop').slideDown(100);
});
$('.menu__list').on('mouseleave', function (e) {
    $('.middleMenu__drop').slideUp(100);
});

если разделить событие не сломается, а клик указан для тачей?

Это адаптивное меню, оно должно срабатывать и при наведении и при клике, в том числе и с мобильных устройств=(

Получается что да, для тачей, для мышки срабатывает hover

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

Возможно как-то можно дополнить событием на клик(тап), что если меню раскрыто, то при клике slideUp а если закрыто, то slideDown?

Да, работает, но закрывается только по клику вне меню, а на мобильных устройствах это меню занимает весь экран по ширине, что бы его закрыть, нужно скролить и искать пустое место что бы при клике закрылось=( То есть нужно условие для клика по идее? Но как отследить, открыто ли меню сейчас, что бы понять стоит его закрыть или открыть

В общем написал вот так и все работает вроде бы как нужно, буду тестировать. Всем спасибо за ответы

$('.menu__list').on('mouseenter', function (e) {
    $('.middleMenu__drop').slideDown(100).addClass('open');
});
$('.menu__list').on('mouseleave', function (e) {
    $('.middleMenu__drop').slideUp(100).removeClass('open');
});
$('.menu__list').on('click', function (e) {

    if($('.middleMenu__drop').hasClass('open')){        
        
        $('.middleMenu__drop').slideUp(100).removeClass('open');
    }else{
        
        $('.middleMenu__drop').slideDown(100).addClass('open');
    }
});

UPD. Поспешил, не правильно работает на тачскрине, при первом нажатие меню раскрывается и тут же скрывается, после этого начинает работать нормально