jquery - Bootstrap 崩溃一半在 iPhone 上工作

Question

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

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

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

在适用于 iOS 的 Google Chrome 应用程序上，它也无法正常工作。

当我简单地将 bootstrap collapse 从 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这解释了问题出在将事件绑定(bind)到不可点击的元素上。

显然 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>

现在可以了。

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