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

Question

下面的代码利用bootstrap data-toggle="collapse"来点击已配置的元素来执行折叠/展开功能,在这种情况下,单击parent1和parent2

问题:点击parent元素后,崩溃就可以通过我的电脑使用Chrome和Firefox浏览器进行,但是我的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

我尝试使用a <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可以轻松排除对a的期望.输出仍然符合预期,适用于Chrome,Firefox以及Safari.

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

更多关于data-toggle和data-*:Twitter Bootstrap中的数据切换属性