Question

我有一个包含嵌套列表的列表，我想在点击它们时打开它们。它在桌面和各种浏览器上运行良好，但是当我使用iOS，iPad或iPhone时，它不想工作。

列表如下：

<ul class="lessonList">
   <li class="lessonItem" id="1"><input type="checkbox" class="scopeCheck">Default Scope
      <ul style="display:none;" class="scope1">...other content in here</ul>
   </li> 
</ul>

和代码如此：

$(document).on("click",".lessonItem",function(e){
    e.stopImmediatePropagation();
         $(this).children("ul").slideToggle();

});

我有一个stop immediateprop来停止点击激活slidetoggle的复选框，但是在iOS上，它甚至不会掉落，直到（并且只有）你勾选复选框。点击li本身在iOS设备中什么都不做。

Answer 1

如果您将此样式添加到<li>元素，则可以使用：

li { cursor: pointer; }

JSFIDDLE DEMO

似乎是iOS事件的错误 - reference。

Answer 2

这在非常特定的条件下发生：

有一个可点击的元素的悬停规则。该规则中的样式无关紧要，规则甚至可以为空。
有一个CSS3相邻的兄弟规则，其中一个最具特殊的术语与DOM中的至少一个元素匹配。它不需要匹配整个规则。同样，规则甚至可以是空的。
可点击元素后跟一个元素（也可以作为元素中的第一个元素包装）。

您有一个可点击元素的悬停规则。该规则中的样式无关紧要，规则甚至可以为空。你有一个CSS3相邻的兄弟规则，其中一个最具特殊的术语与DOM中的至少一个元素相匹配。它不需要匹配整个规则。同样，规则甚至可以是空的。并且可点击元素后跟一个元素（也可以作为元素中的第一个元素包装）。在这种情况下，点击可点击元素（无论该点击是JavaScript onclick处理程序，还是只是一个简单的）都不会注册。相反，它应用：悬停样式，并且仅在第二次点击时才导航或运行JavaScript。这只发生在Mobile SafariChanging上，几乎所有东西都会让bug消失，因此所有这些都是有效的解决方法：

检查我们的代码后，所有这些条件都适用于我们，但删除这些条件也是不切实际的。

Answer 3

我也遇到了这个问题，CSS游标技巧对我没用。

幸运的是，经过一些游戏，我发现点击事件总是被传送到锚标签，并且能够通过将我的Div容器更改为Anchor标签来解决我的问题。

单击未在iOS上触发的事件

3 个答案: