Question

我使用带有sb-admin-2主题的Bootstrap（3.3.5）。我的折叠面板在桌面（OsX上的chrome）和手机（Android上的Chrome）上运行良好，但不会在Ipad（chrome或safari）上打开。

以下是我的某个面板的代码：

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo">
        <h4 class="panel-title">Select Columns</h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum</div>
    </div>
</div>

我从其他SO回答中看到，如果我使用＆lt; a＆gt;来实现崩溃。标签，并有一个href，这解决了ipad问题。 Witchfinder的答案在这里：

Bootstrap Collapsed Menu Links Not Working on Mobile Devices

像这样：

<h4 class="panel-title">
    <a class="panel-heading collapsed" data-toggle="collapse" 
        data-target="#collapseTwo" href="#collapseTwo">
        Select Columns
    </a>
</h4>

我尝试了这个并确实修复了它。有点。但它有一些问题：

整个栏不再可点击，只是文字。我想要吧。
href是一个锚链接，因此当您单击它时，它会更新地址栏，并使页面跳转到面板主体。如果没有href，地址栏将保持不变，并且页面不会跳转。好多了。

我尝试了从你编辑代码到引导程序的那个问题的另一个解决方案 - 删除ontouchstart但在我的情况下没有修复它。

有没有人知道如何在不添加href的情况下解决这个问题？或者至少发生了什么。点击在哪里？

Answer 1

这可能是 的一个技巧。整个栏不再可点击，只是文字。我想要吧 部分，但只需尝试一次：

用另一个href="#collapseTwo"的锚来覆盖你的整个酒吧，我很确定它现在应该以整个酒吧为目标。

<a href="#collapseTwo">
   <h4 class="panel-title">
      <a class="panel-heading collapsed" data-toggle="collapse" 
          data-target="#collapseTwo" href="#collapseTwo">
          Select Columns
      </a>
   </h4>
</a>

关于url更改，我认为这是不可避免的，但不确定。

我在另外一篇文章中发现，将style="cursor: pointer;"设置为元素也可以。 如果您没有使用锚标记，则有用！可能会解决您的url问题

Bootstrap折叠面板在ipad上无法打开

1 个答案: