jquery - iOS 上的 CSS 悬停仅在分配了事件监听器时才有效

Question

我遇到了一个奇怪的问题。我使用 js 从选择下拉表单元素中创建了一个 css 下拉菜单。它似乎在大多数浏览器中都能正常工作，但 ios 设备除外。当我悬停下拉 div 时； css 悬停事件不会在 ios 设备中触发，但如果我将事件监听器添加到下拉元素而监听器中没有任何操作，则悬停事件开始工作。

这是我要编辑的代码:http://codepen.io/kuldeepdaftary/pen/jKeDi

测试:http://codepen.io/kuldeepdaftary/full/jKeDi

尝试在 JS 中评论以下代码段:

  $('.dropdown').click(function(){}); 

一旦你评论以上部分! Css hover 将不再在 iphone/ipad 中工作，但只要您取消注释，它就会正常工作。

因为clickevent监听函数是空白的!我不明白解决问题的目的是什么？

Answer 1

iOS 设备上没有悬停事件。首先，将显示和隐藏下拉列表的逻辑隔离到它自己的函数中。那么您应该根据浏览器中可用的功能来解决这个问题。

if ('ontouchstart' in document.documentElement) {
  $(".dropdown").click(hoverFunction);
} else {
  $(".dropdown").hover(hoverFunction);
}

可能值得注意的是，您可以仅使用 CSS 实现下拉功能，在这种情况下，这里有适合您的解决方案: Drop-down menu on touch based devices