1

我面临一个奇怪的问题。我已经使用 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/ipads 中工作，但只要你取消注释它，它就会正常工作。

由于 clickevent 侦听器功能为空白！我不明白解决问题的方法是什么？

4

2 回答 2

2

ios 设备上没有悬停事件。首先，将显示和隐藏下拉菜单的逻辑隔离到它自己的函数中。然后，您应该根据浏览器中可用的功能来解决此问题。

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

可能值得注意的是，您可以仅使用 CSS 实现下拉功能，在这种情况下，这里有一个解决方案： 基于触摸的设备上的下拉菜单

于 2013-02-05T10:54:19.363 回答
0

OP 被证明是在 iOS 上实现“触摸触发：悬停”的可行解决方案。

我大约在同一时间发现的另一种方法是将目标包装在 a[href=trivial] 中。然后，目标的 :hover 伪类在 iOS 中在触摸时更可靠地触发。

于 2015-03-01T10:32:20.817 回答