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

Question

下面的代码利用 Bootstrap 的data-toggle="collapse"来执行单击配置元素时折叠/展开的功能，在本例中，单击 parent1 和 parent2

问题:单击 parent 元素时，在使用 Chrome 和 Firefox 浏览器的 PC 上可以进行折叠，但在使用 Safari 浏览器的 iPad 上却无法进行折叠。

<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

我尝试使用 <a>而不是<div>在我们单击展开/折叠的父元素中，即

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

并更新了 parentclass 的样式有display: block; ，并在 iPad 中进行了测试，现在也可以在 iPad safari 浏览器中运行!

更新1:看到一篇文章建议也使用 href让 iPhone 中的 Safari 理解，但我不确定是否也必须使用该属性，就像我使用 href 进行测试时一样同样，每次我触摸 parent标题、页面给人耳目一新的感觉[页面移动]。所以认为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