下拉菜单在触摸设备上保持打开状态

问题描述：

我有一个下拉菜单，除了触摸设备外，它的工作状态很好。在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') 
     }); 
    });

不确定悬停是否是触摸屏的最佳方法。请尝试专注。因为那种'失焦'功能应该是错误的。你见过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. 
});

我可能是错的，但试试看看会发生什么。

这没有奏效。导航菜单不再显示在常规浏览器中悬停。 – 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(); 
    }); 
});

下拉菜单在触摸设备上保持打开状态

相关推荐