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