Question

On my page当我悬停特定的主菜单项（“nos restaurants”）时，我会显示一个特定的子菜单。一切都在桌面上工作，但在iPad上这个子菜单的项目需要2个水龙头而不是一个（一个水龙头什么都不做）。为什么呢？

HTML：

<div class='sub_menu_wrap'>
  <div class='menu_la_carte'>
    <?php wp_nav_menu( array('menu' => 'Menu La Carte' )); ?>
  </div>
  <div class='menu_nos_restaurants'>
    <?php wp_nav_menu( array('menu' => 'Menu Nos Restaurants' )); ?>
  </div>
</div>

JS：

$( '.restaurants_li, .menu_nos_restaurants' ).hover(
  function() {
    $( '.menu_la_carte' ).fadeOut(0);
    $( '.menu_nos_restaurants' ).fadeIn(0);            
  }, function() {
    $( '.menu_la_carte' ).fadeIn(0);
    $( '.menu_nos_restaurants' ).fadeOut(0);           
  }
);
$( '.sub-menu' ).click(function(event) {
  event.stopPropagation();
});

Answer 1

您应该查看此主题：Fix CSS hover on iPhone/iPad/iPod

在触摸设备上，任何具有悬停状态的元素都需要2次点击（第一次打开悬停状态，第二次像标准桌面点击）。

还有一个完整的CSS或jQuery悬停元素解决方案。看看这个：iPad/iPhone hover problem causes the user to double click a link

找到另一个链接可能会有所帮助： https://css-tricks.com/forums/topic/ipad-hover-effect/

Answer 2

我认为这是由于移动浏览器延迟300毫秒而发生的。

谷歌：

...移动浏览器将等待大约300毫秒您点击按钮以触发点击事件。原因是浏览器正在等待您是否正在执行某项操作双击。

我的一个客户端项目面临同样的问题，为此我使用了https://github.com/ftlabs/fastclick库来消除物理点击和触发移动浏览器上的点击事件之间300毫秒的延迟。

您还可以尝试https://github.com/dave1010/jquery-fast-click

在同一个项目中，我也遇到了下拉菜单的双击问题，这也是因为延迟300毫秒。

双击问题出现在Android浏览器/设备中，因此我检测到用户代理并应用自定义函数来处理这个问题，这可能对您有所帮助。

<?php 
 if (user_agent() == 'android') {
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\"";
    $homePage = "#";
} else {
    $handleClick = " ";
    $homePage = "index.php";
}
?>

<!--//Script to Handle menu for mobile devices-->
<script type="text/javascript">
//handle 300ms delay click in android devices
var clicks = 0;
function checkClicks(e) {
    clicks = clicks + 1;
    if (clicks == 2) {
        window.location = e;
    } else {
        //do nothing
    }
}
</script>

如果你面对的话，你也可以试试一些可用的插件来处理这个问题。

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

悬停菜单项目需要2次点击而不是1次才能在iPad上运行

2 个答案: