下拉菜單在觸摸設備上保持打開狀態

我有一個下拉菜單，除了觸摸設備外，它的工作狀態很好。在ipad上，當您觸摸其中一個菜單項時，下拉菜單顯示爲正常，但即使您觸摸屏幕上的其他位置，也會保持在此位置。如果您觸摸屏幕上的其他位置，我怎樣才能使菜單消失？這裏的的jsfiddle：下拉菜單在觸摸設備上保持打開狀態

http://jsfiddle.net/Jkfbm/

，這裏是我的jQuery：

$(document).ready(function(){ 
$('ul.nav_menu > li').hover(function() { 
    $(this).children(".sub_menu") 
     .stop(true, true) 
     .animate({ 
      height:"toggle", 
      opacity:"toggle" 
     },600, 'easeInOutQuad') 
     }); 
    });

來源

2013-03-10 hyphen

不確定懸停是否是觸摸屏的最佳方法。請嘗試專注。因爲那種'失焦'功能應該是錯誤的。你見過jQuery上的懸停功能嗎？你有兩個參數功能。 'hover（function（）{// in hover}，function（）{// out of hover}）;'。那麼你可以通過這種方式扭轉動畫？ – sourRaspberri 2013-03-10 16:01:52

「重點」似乎不起作用。對不起，我對JavaScript很新，所以我可能需要一些代碼示例來真正掌握你的建議。 – hyphen 2013-03-10 16:07:55

我正在嘗試使用modernizr爲觸摸事件提供一種替代方案，但我不清楚如何將其取消。 – hyphen 2013-03-10 18:05:44

這樣的事情。我認爲這是你的切換，但如果你說過它可以在其他設備和瀏覽器上運行，那麼我可能會錯誤。

$('li','.nav_menu'.hover(function(){ 
    $(this).animate({height:'100%','opacity':'1'},600);//plus I've noticed a syntax error on this line. 
//unexpected bracket after 'easeInOutQuad' 
},function(){ 
    $(this).animate({height:'0%','opacity':'0'},600);//putting back the animation. 
});

我可能是錯的，但試試看看會發生什麼。

來源

2013-03-10 21:06:13 sourRaspberri

這沒有奏效。導航菜單不再顯示在常規瀏覽器中懸停。 – hyphen 2013-03-10 21:27:30

我目前正在嘗試此...更好的建議任何人？

$(document).ready(function() { 
    $('ul.nav_menu > li').hover(

    function() { 
     $(this).children(".sub_menu") 
      .stop(true, true) 
      .animate({ 
      height: "toggle", 
      opacity: "toggle" 
     }, 600, 'easeInOutQuad'); 
    }); 
    $('html').click(function() { 
     $(".sub_menu").hide(); 
    }); 
});

來源

2013-03-10 22:12:58 hyphen

下拉菜單在觸摸設備上保持打開狀態

回答

相關問題