iPad上的悬浮js功能不会切换

Question

On desktop when hover a div some overlay slides down, OKE.

But on my iPad that works on touch, OKE, but no toggle when touch again.

The overlay div is always visible after the first click.

$('.side').hover(
    function(){
        $(this).find('.txt').slideDown(250); //.fadeIn(250)
    },
    function(){
        $(this).find('.txt').slideUp(250); //.fadeOut(250)
    }
); 

I have a example here: http://jsfiddle.net/fourroses666/87011nkx/

Any idea how to fix this for ipad - toggle function?

Answer 1

You need to implement custom hover functionality with touch events support. Looks like something like this would be enough in this case:

$('.side').on({
    'mouseenter mouseleave touchstart': function(e) {
        var $txt = $(this).find('.txt'),
            type = e.type == 'mouseenter' || (e.type == 'touchstart' && !$txt.is(':visible'));
        $txt[type ? 'slideDown' : 'slideUp'](250);
    }
});