Bootstrap数据切换在Safari中不起作用 [英] Bootstrap data-toggle not working in Safari

问题描述

下面的代码利用引导程序的data-toggle="collapse"来执行折叠/展开功能，只需单击已配置的元素， 在这种情况下，单击parent1和parent2

The below code making use of bootstrap's data-toggle="collapse" to do the functionality of collapse/expand on click of configured element, In this case, clicking parent1 and parent2

问题::单击parent元素时，折叠是在我的PC上使用Chrome和firefox浏览器进行的，而在我的iPad上却没有使用野生动物园浏览器.

Problem: On click of parent element, the collapse is working from my PC using Chrome and firefox browsers, but it is not working from my iPad using safari browser.

<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

推荐答案

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

I tried using a <a> instead of <div> in parent elements where we click to expand/collapse, ie

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

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

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

and updated the styling of parentclass to have display: block;, and tested in iPad, now its working from iPad safari browser too!

更新1: 看到一篇文章，建议也使用href来使iPhone中的Safari能够理解，但是我不确定是否也必须使用该属性，就像我每次使用href进行测试时一样， >页眉，页面给人以刷新[页面移动]的印象.因此认为不需要href.

Updates 1: Saw one post where it is suggesting also to use href to make Safari in iPhone understand, but I am not sure if I must use that attribute too, as when I test with href too, everytime I touch on the parent header, the page gives an impression of refreshing [page moves]. So thinking that href is not needed.

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

更新2

使用<button>而不是<a>更新，因此可以轻松排除对href的期望.在Chrome，Firefox和Safari中都可以正常输出.

Updated using <button> instead of <a> so that expectation of an href could be easily ruled out. The output is still as expected, working in Chrome, Firefox as well as Safari.

请建议，如果这是正确的方法或有其他替代方法

Please suggest if this is correct approach or have any alternate fixes

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

这篇关于Bootstrap数据切换在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！