javascript - iPad 上的悬停 js 功能不会切换

Question

在桌面上，当鼠标悬停在 div 上时，一些叠加层会向下滑动，OKE。

但是在我的 iPad 上可以触摸，OKE，但是当再次触摸时没有toggle。

叠加层 div 在第一次点击后始终可见。

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

我这里有一个例子: http://jsfiddle.net/fourroses666/87011nkx/

知道如何为 ipad - toggle 功能解决这个问题吗？

Answer 1

您需要实现带有触摸事件支持的自定义 hover 功能。在这种情况下看起来像这样就足够了:

$('.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);
    }
});