javascript - Bootstrap 折叠面板无法在 iPad 上打开

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 答案中看到，如果我使用 标签实现折叠，并且有一个 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>

我试过了，确实解决了这个问题。有点。但是它有一些问题:

1. 整个栏不再可点击，只有文本。我想要酒吧。
2. href 是一个 anchor 链接，因此当您单击它时，它会更新地址栏，并导致页面跳转到面板正文。没有href，地址栏不变，页面不跳转。好多了。

我尝试了那个问题的其他解决方案，您可以在其中编辑 Bootstrap 的代码 - 删除 ontouchstart 但在我的情况下并没有修复它。

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

Answer 1

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

再用一个具有 href="#collapseTwo" 的 anchor 覆盖整个栏，我很确定它现在应该以整个栏为目标。

<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;" 也可以。 如果您不使用 anchor 标记，这很有用!这可能会解决您的 url 问题