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

Question

[ummahusla]

Код:

$('li.bg-menu-parent-item').hover ( function() {
	$('.BG_submenu', this ).fadeIn(0);
	$(this).addClass('bg-menu-parent-item-hover');
}, function() {
	$('.BG_submenu', this ).fadeOut(0);
	$('#clubs_container').fadeOut(0);
	$(this).removeClass('bg-menu-parent-item-hover');
});

Answer 1

[trushka]

А почему на css не сделать?

.BG_submenu {opacity:0; visibility: hidden; transition: 0.3s linear}
.bg-menu-parent-item:hover .BG_submenu {opacity:1; visibility: visible}

Ой, там fadeIn(0) у вас.. Тогда transition и не нужен)

Comments

[ummahusla]

Я наделся, это можно выровнить парой строчек JS кода. Просто не хочется всю навиггацию переписывать, там те ещё костыли.

[trushka]

А зачем переписывать? Просто одну строу в css дописать и поменять, скорее всего там display: none стоит - на visibility:hiden; opacity:0. Ну, это если плавность нужна, если нет - то :hover .BG_submenu {display:block}

[ummahusla]

trushka: Понятно, просто я ковырял `touchstart` и `touchend` думал, что смогу что-то сделать с их помощью.

[trushka]

ummahusla, с `touchstart` и `touchend` не всё так просто - важно ж, чтоб меню не сворачивалось после того, как прикосновение закончилось.. А в мобильниках там хитро - там состояние :hover наступает уже ПОСЛЕ отпускания пальца.. И то, там свои ещё подводные тараканы могут быть, особенно, в ойфонах.. Хотя, если тому элементу, для которого :hover задан, задать в html onclick="" - должно сработать по любому

[ummahusla]

trushka: Я через touchstart добавил и он чувствует, что я пальцем нажимаю, но сразу же его сворачивает. Потом я добавил к функции return false, и он перестал сворачивать, но и child menu с его элементами, делает не кликабельным.

[ummahusla]

trushka: Спасибо за совет, запдейтил я менюшку, выкинул js плагин из проекта, освободил место и всё работает на простом CSS, но на мобильном так и не работает

[trushka]

Может, тогда ещё попробовать и :active указать:
.bg-menu-parent-item:hover .BG_submenu, .bg-menu-parent-item:active .BG_submenu {opacity:1; visibility: visible}

Если не поможет - для .bg-menu-parent-item задать cursor: pointer (в айфонах особенно помогает), так же вроде помогает задание пустого onclick:
<li class="bg-menu-parent-item" onclick="">..</li>

[ummahusla]

trushka: Я вместо :active, добавил :focus

Answer 2

[ummahusla]

Последовал совету trushka, убрал вcю JS логику, навесил всё простым CSS.
Потом добавил к :hover ещё :focus и немного по корявому, но заработало на мобильных девайсах.

Comments

[trushka]

Возможно, там какие-то ещё скрипты, которые нажатие перехватывают.. Я вот сделал простенькое вложенное меню - с одним hover'ом работает..
https://jsfiddle.net/rwjj0owp/

[trushka]

Правда, только на ондроиде тестировал, может, в ойфоне каком и капризничать будет))

[ummahusla]

trushka: Если честно, у нас уже несколько лет менюшка была поломанная для мобильников, поэтому когда это заработало, были все благодарны и сказали возращаться дальше к другому проекту, ибо на айфоне и айпаде работало на ура. Но для себя, я ещё покопаюсь, чтобы на будещее знать, что и как :)