Bootstrap 在 iPhone 上崩溃了一半

Question

我正在构建一个带有隐藏 div 的网页，当单击另一个 div 时它会折叠。 问题是当我使用 iPhone 时 div 不会崩溃（计算机和其他设备工作得很好）。 我什至在我的笔记本电脑上尝试过 Safari，它运行良好。

页面的内容最初是使用jQuery 插入到页面中的，并且可以正常工作。但是我希望它加载到不同的页面上，所以现在在我单击链接后，内容会与页面的其余部分一起加载。

当我使用 iOS 的开发者工具时，我注意到点击链接并没有导致错误，实际上，没有触发任何事件。 当我使用 jQuery 显式切换折叠时，它确实有效。

在适用于 iOS 的 Google Chrome 应用上，它也不能正常工作。

当我简单地将引导程序崩溃从 w3schools 复制粘贴到我的网页时， 他们的崩溃奏效了，而我的没有。 因此我添加了一些源代码，也许我错过了一些东西：

<div class="result_header" data-toggle="collapse" data-target="#source_1_collapse">
    <h2 class="result_h2">Results for "a": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    <table class="table _table-striped _table-hover" id="source_1_table">
    .
    .
    </table>
</div>

感谢您的帮助。

Answer 1

嗯，答案就在那里，我没看到...

经过长时间的研究，我发现this article 解释了问题在于将事件绑定到不可点击的元素。

显然 iPhone 的 safari 不会让输入或链接以外的元素触发“点击”事件。

解决方案是为不可点击元素添加一个“onlick”属性，该属性导致一个空函数，现在该元素是可点击的。

我已将我的代码更改为：

<div onclick="none()" class="result_header" data-toggle="collapse" data-target="source_1_collapse" >
   <h2 class="result_h2">Results for "{{name}}": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    .
    .
</div>

<script>
    function none(){}
</script>

现在可以了。

希望对你有所帮助，美好的一天。