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

Question

[Nohaga]

Меню открывается при клике и при наведении, так нужно.

$('.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 я пробовал это не реализовать, тогда при наведении меню невозможно закрыть скриптом.

Comments

[Макс]

Можно попробовать сделать проверку через if на Desktop (например, через width) и закрыть функцию с hover для мобильных устройств

Answer 1

[RMate]

Можно и нужно реализовать на css. что-то вроде

.menu .child-block{
    display:none;
}
.menu:hover .child-block{
    display:block;
}

Конкретно по вашей проблеме - можно определять телефон это, либо нет, после чего подменять событие hover на событие click на тачскринах. Но проще и правильнее действовать первым вариантом

Comments

[Nohaga]

Это конечно легко сделать, только при наведении на элемент он всё время ховер и все стили работают, а нужно что бы можно было ещё по клику закрыть меню.

[Макс]

Nohaga,
При клике у тебя добавляется класс opened, поэтому если сделать как сказал
RMate
А также вместо opened сделать closed (display:none;) то будет работать.

Answer 2

[2cha.headz]

оберните ваш обработчик hover в

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        сюда код hover
    }
 });

Comments

[Сергей delphinpro]

не размер нужно детектить, а хотя бы тач-скрин https://stackoverflow.com/questions/14439903/how-c...

[2cha.headz]

Сергей delphinpro, это понятно, но обычно адаптивка настраивается по медизапросам