@Nohaga

Почему событие hover мешает на мобильном?

Меню открывается при клике и при наведении, так нужно.
$('.menu').hover(
    function(){ $(this).addClass('opened') },
    function(){ $(this).removeClass('opened') }
)
    $('.menu').on('click',function () {
    if($(this).hasClass('opened')){
       $(this).removeClass('opened');
    } else { $(this).addClass('opened');}
})


Так вот, из за кода
$('.menu').hover(
    function(){ $(this).addClass('opened') },
    function(){ $(this).removeClass('opened') }
)

на мобильной версии сайта, при первом касании ничего не происходит, а начиная со второго всё работает нормально, это происходит из за события ховер, как это можно исправить? на css я пробовал это не реализовать, тогда при наведении меню невозможно закрыть скриптом.
  • Вопрос задан
  • 348 просмотров
Пригласить эксперта
Ответы на вопрос 2
@RMate
Можно и нужно реализовать на css. что-то вроде
.menu .child-block{
    display:none;
}
.menu:hover .child-block{
    display:block;
}


Конкретно по вашей проблеме - можно определять телефон это, либо нет, после чего подменять событие hover на событие click на тачскринах. Но проще и правильнее действовать первым вариантом
Ответ написан
@glagolew059
frontend developer
оберните ваш обработчик hover в
$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        сюда код hover
    }
 });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы