How to map hover to touchstart?

Question

JavaScript

Hello. The site has a menu with pop-up child sub-menus when hovering over the main menu. popup is done like this:

$('.menu-fallback').hover(function () {
        $(this).find('.fallback').stop().slideDown('fast')
        $(this).addClass('active');
    }, function () {
        $(this).find('.fallback').stop().slideUp('fast');
        $(this).removeClass('active');
    });

The site is not adapted to the mobile menu, and when you tap on the main item, of course, you immediately go to the selected item. I tried to change this:

$('.menu-fallback').hover(function () {
        if ($(this).hasClass('active')){
            //Если уже выделено
        }
        else{
            // Если нету класса active
            $(this).find('>a').click(function(e){
                e.preventDefault();
            });
        }
        $(this).find('.fallback').stop().slideDown('fast')
        $(this).addClass('active');
    }, function () {
        $(this).find('.fallback').stop().slideUp('fast');
        $(this).removeClass('active');
    });

What led to the fact that parent links now do not work out at all. the transition event is blocked.
How to fix it? Or maybe there is some way to easily bind the hover function to touchstart ?

Answer 1

Use:

function is_touch_device() {
    return !!('ontouchstart' in window);
}

and in case the function returns true , replace hover with click .