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);
    }
});