1

这是在 MouseOver 上将一个 div 滑到另一个上，然后在 MouseOut 上滑动。现在，在 ipad 上，当我触摸 maindiv 时，它会滑动 lowerdiv，但我无法弄清楚让它滑回以再次在“触摸”上再次显示 maindiv。我也试过 jquery.ui.touch-punch.min.js 但没有反应。我希望它在点击或触摸时滑回，如果在设定时间 X 后没有被触摸。有人可以帮忙吗？

   <script language="JavaScript" type="text/javascript">
    <!--
        $(function(){
            $(".maindiv").hover(function(){
                $(this).children('.lowerdiv').stop().animate({top:0})
            },function() {
                    $(this).children('.lowerdiv').stop().animate({top:140})
                })

        })

    //-->
    </script>

    <style>
        .maindiv{
            height:66px;
            width:390px;
            background:#FFF;
            position:relative;
            overflow:hidden;
            float:left;
            margin:0px;
        }
        .lowerdiv{
        height:66px;
            width:390px;
            background:#FFF;
            position:absolute;
            top:140px;
    }
        </style>

     <div class="maindiv">
        //Main div content
        <div class="lowerdiv">
            //2. div content
        </div>
    </div>
4

1 回答 1

0

try this:

i hope it will solve hover problem in touch devices :) (i have tested it on my tablet, after lifting up finger/touch, lower div is slide back)

No need of use timer or detecting second touch after some delay i suggest.

UPDATED:

var $mainDiv = $(".maindiv"),
    $lowerDiv = $mainDiv.children('.lowerdiv'); 

function showHideChild(flag){

    var temp = (flag)? 0 : 140;     
    $lowerDiv.stop().animate({top:temp});
}

$mainDiv.on({
    mouseover: function(){                  
        showHideChild(true);
    },
    mouseout: function() {
        showHideChild(false);
    },   
    touchstart: function(){
        showHideChild(true);
    },
    touchend: function(){
        setTimeout(function(){
           showHideChild(false);
        },1500);
    }
});

working fiddle here : http://jsfiddle.net/QwvtL/3/

I hope it helps.

于 2013-08-21T17:26:50.337 回答