Question

我面临一个奇怪的问题。我使用js从select下拉表单元素中创建了一个css下拉菜单。它似乎在大多数浏览器中工作正常，但ios设备。当我悬停下拉div;在ios设备中不会触发css悬停事件，但是如果我在监听器中没有操作的情况下向dropdown元素添加eventlistener，则悬停事件开始工作。

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

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

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

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

一旦你对以上部分发表评论！ Css悬停在iphone / ipads中不再起作用，但是一旦取消注释它就会正常工作。

由于clickevent listner功能是空白的！我不明白解决问题的原因是什么？

Answer 1

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

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

值得注意的是，您只能使用CSS实现下拉功能，在这种情况下，您可以找到解决方案： Drop-down menu on touch based devices

Answer 2

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

我在同一时间发现的另一种选择是将目标包裹在一个[href = trivial]中。目标的：hover伪类在iOS中触摸时更可靠地触发。

只有在分配了事件侦听器时，才能在ios上悬停CSS

2 个答案: