Bootstrap 数据切换在 Safari 中不起作用

Question

下面的代码利用 bootstrap 的 data-toggle="collapse" 在点击配置元素时执行 collapse/expand 的功能，在这种情况下，单击 parent1 和 parent2

问题： 单击 parent 元素时，崩溃在我使用 Chrome 和 firefox 浏览器的 PC 上运行，但在我 iPad 使用 safari 浏览器。

<div id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1">
  <strong>Technologies </strong>
</div>

<div id="childof1" class="collapse">
  <!-- elements of child1 -->
</div

<div id="parent2" type="button" class="parentclass" data-toggle="collapse" data-target="#childof2">
  <strong>Vertical </strong>
</div>

<div id="childof2" class="collapse">
  <!-- elements of child2 -->
</div

参考文献：http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Answer 1

我尝试在 parent 元素中使用 <a> 而不是 <div>，我们点击 expand/collapse，即

<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1"> <strong>Technologies </strong> </a>

并将 parentclass 的样式更新为 display: block;，并在 iPad 中进行了测试，现在它也可以在 iPad safari 浏览器中使用了！

更新 1： 看到一个 post，它建议也使用 href 使 iPhone 中的 Safari 理解，但我不确定我是否也必须使用该属性，就像我用 [= 测试时一样15=]也是，每次我点parentheader，页面给人一种清爽[page moves]的感觉。所以认为 href 是不需要的。

<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1" href="#childof1">

更新 2

使用 <button> 而不是 <a> 进行了更新，因此可以轻松排除对 href 的预期。输出仍然符合预期，适用于 Chrome、Firefox 和 Safari。

请建议如果这是正确的方法或有任何替代修复

关于 data-toggle 和 data-* 的更多信息：The data-toggle attributes in Twitter Bootstrap

Bootstrap 数据切换在 Safari 中不起作用

Bootstrap data-toggle not working in Safari

safari

jquery

twitter-bootstrap