iPad上的懸浮js功能不會切換

Question

在桌面上懸停div某些覆蓋層會向下滑動，確定。

但是在我的iPad上可以觸摸，OKE，但是再次觸摸時沒有toggle 。

第一次點擊后，overlay 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);
    }
});