Форум

Tipylja · #21 (**permalink**) 11.09.2017, 11:00

$('.menu__list').on('mouseleave mouseenter click', function (e) {

    if( e.relatedTarget === null && e.type !== 'click' ) return;
    switch( e.handleObj.origType ) {
        case 'mouseleave': $(this).find('.middleMenu__drop').slideUp(100); break;
        case 'mouseenter': $(this).find('.middleMenu__drop').slideDown(100); break;
        case 'click': $('.middleMenu__drop').slideToggle(100); break;
    }
});

Это работает как задумано.
UPD Нет, есть глюк со сворачиванием меню. Если открыть меню, а потом тапнуть куда-нибудь мимо, то меню свернется, а если повторно тапнуть, что бы меню развернулось, то оно развернется и тут же свернется

j0hnik · #22 (**permalink**) 11.09.2017, 19:20

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<ul class="wrap middleMenu">
<li class="menu__list first"><a>Каталог</a>
	<ul class="middleMenu__drop" style="display: none;">
		<li><a href="https://google.com">Туфли</a></li>
		<li><a href="https://google.com">Босоножки</a></li>
		<li><a href="https://google.com">Кеды</a></li>
		<li><a href="https://google.com">Кросcовки</a></li>
		<li><a href="https://google.com">Ботинки демисезон</a></li>
		<li><a href="https://google.com">Сапоги демисезон</a></li>
	</ul>
</li>
<li><a href="https://yandex.ru">ОПЛАТА / ДОСТАВКА</a></li>
<li><a href="https://yandex.ru">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
<li class="last"><a href="https://yandex.ru">НОВИНКИ</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

function is_touch_device() {
 return (('ontouchstart' in window)
      || (navigator.MaxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));
}

if (!is_touch_device()) {
$('.menu__list').on('mouseenter', function (e) {
    $('.middleMenu__drop').slideDown(100);
});
$('.menu__list').on('mouseleave', function (e) {
   $('.middleMenu__drop').slideUp(100);
});
}
else {
	$('.menu__list>a').on('touchstart', function (e) {
		e.stopPropagation();
     $('.middleMenu__drop').slideToggle(100);
});
}

</script>
</body>
</html>

немного изменил, поэксперементируйте

Tipylja · #23 (**permalink**) 12.09.2017, 09:40

Спасибо. Последнее работает пока что без глюков

Форум

Справочник

Discord чат

Курсы javascript