在另一個iPad上滑動一個div

Question

這是在MouseOver上滑動另一個div而返回MouseOut。現在，當我觸摸maindiv時，在ipad上滑動了lowerdiv，但我無法弄清楚它是否會讓它滑回來再次顯示maindiv。我也試過jquery.ui.touch-punch.min.js，但沒有反應。我希望它滑回onclick或觸摸，如果沒有在設置時間後觸摸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> 

Answer 1

試試這個：

我希望這將解決懸停問題觸摸設備:)（我已經測試它在我的平板電腦，擡起手指/觸摸後，較低的DIV是滑回）

我建議在延遲一段時間後，不需要使用計時器或檢測到第二次觸摸。

更新：

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

工作小提琴這裏：http://jsfiddle.net/QwvtL/3/

我希望它能幫助。