Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2017, 11:50
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Некорректная работа меню по тапу
Здравствуйте. Подскажите пожалуйста. Есть выпадающее меню:
<ul class="wrap middleMenu">
	<li class="menu__list first">
	<a class="touch">Каталог</a>
		<ul class="middleMenu__drop">
			<li><a href="#">Туфли</a></li>
			<li><a href="#">Босоножки</a></li>
			<li><a href="#">Кеды</a></li>
			<li><a href="#">Кросcовки</a></li>

		</ul>
	</li>
	<li><a href="#">ОПЛАТА / ДОСТАВКА</a></li>
	<li><a href="#">ОТЗЫВЫ О МАГАЗИНЕ</a></li>
	<li class="last"><a href="#">НОВИНКИ</a></li>
</ul>


$(function (event) {
    $('.menu__list').on('mouseleave mouseenter touchstart', function () {

        $('.middleMenu__drop').slideToggle(50);


    })
})

При работе с мышкой все работает вроде как корректно, но вот при тапах с тачскринов происходит что-то неясное, при первом тапе меню открывается и сразу же закрывается, после этого по тапу меню открывается, но при клике по его пунктам я попадаю по тем ссылкам которые находятся под этим самым выпадающим листом, то есть оно как будто бы прозрачно насквозь для тапа, хотя для мышки переходы по ссылкам также происходят корректно, возможно первая проблема и тянет за собой вторую, а возможно дело в стилях. Хотелось бы решить первый момент, я только начал изучать JS и до JQ еще не дошел, возможно тут нужно где-то вписать event.preventDefault() ? Пробовал вписывать после
$('.middleMenu__drop').slideToggle(50);

но ничего не поменялось, подскажите пожалуйста, куда копать?
Ответить с цитированием
  #2 (permalink)  
Старый 21.08.2017, 13:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Tipylja, возможно эта статейка тебе поможет...
http://www.manhunter.ru/webmaster/80...ascript.ht ml
Ответить с цитированием
  #3 (permalink)  
Старый 21.08.2017, 14:34
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Сообщение от ksa Посмотреть сообщение
Tipylja, возможно эта статейка тебе поможет...
http://www.manhunter.ru/webmaster/80...ascript.ht ml
Спасибо, почитал, но не помогло.
Я изменил события таким образом
click mouseenter

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


А на тачскрине опять беда, первый тап - меню разворачивается и тут же сворачивается, при втором нажатии все работает корректно, то есть меню работает корректно только после первого нажатия. То есть событие clik решило вопрос с тем, что по пунктам меню нельзя было переходить(описывал выше поведение). НО по всей видимости при первом тапе срабатывают два события - click - разворачивает меню по тапу, а когда палец отрывается от экрана получается срабатывает событие mouseleave - во всяком случае я так думаю, но я еще мало чего понимаю в этом деле..и почему тогда такое поведение именно при первом тапе, при последующих все работает корректно..
Ответить с цитированием
  #4 (permalink)  
Старый 21.08.2017, 15:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Tipylja, я не особо спец по тачскринам...
Ответить с цитированием
  #5 (permalink)  
Старый 21.08.2017, 15:48
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 498

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

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $('.menu__list').on('mouseleave mouseenter click', function (e) {
if( e.relatedTarget === null && e.type !== 'click' ) return;
$('.middleMenu__drop').slideToggle(50);
    });
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 21.08.2017, 15:55
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Сообщение от Белый шум Посмотреть сообщение
Проверьте на разных браузерах и устройствах - не уверен, что способ универсальный.
Все работает. Спасибо вам!
Ответить с цитированием
  #7 (permalink)  
Старый 21.08.2017, 17:09
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Сообщение от Белый шум Посмотреть сообщение
Проверьте на разных браузерах и устройствах - не уверен, что способ универсальный.
Возможно вы мне еще подскажите один момент?
Нашел еще один очень незначительный косяк - если курсор мышки находится над пунктом, открывающим меню(menu__list) и в этом положении обновить страницу, то меню будет работать наоборот, то есть когда курсор мы уберем с menu__list - меню откроется, а при наведении закроется, это уже мелочи и вряд ли часто случается такая ситуация, но возможно это легко решаемый момент?
Ответить с цитированием
  #8 (permalink)  
Старый 21.08.2017, 17:14
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 498

Используйте явные .slideDown(), .slideUp() - каждый на соответствующее событие.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа с анимированным меню. Оптимизация кода ke1evra Мобильный JavaScript 3 28.12.2016 11:35
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Согласованная работа элементов Slide меню VSko jQuery 2 07.08.2011 09:01