Question

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

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

我尝试在父元素中使用if (req.ip === '127.0.0.1') { // do something } else { // do something else }代替<a>我们点击展开/展开，即

<div>

并将<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1"> <strong>Technologies </strong> </a>的样式更新为parentclass，并在iPad上进行了测试，现在也可以在iPad Safari浏览器中使用！

更新1： 看到一篇文章建议也使用display: block;使iPhone中的Safari可以理解，但我不确定是否也必须使用该属性，就像我每次用href测试时一样在href标题上，该页面给人一种刷新[页面移动]的印象。所以认为不需要parent。

href

更新2

使用<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1" href="#childof1">代替<button>更新，以便轻松排除对<a>的期望。输出仍然符合预期，适用于Chrome，Firefox以及Safari。

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

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

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

1 个答案: