17

我在导航栏中使用带有子菜单项的可折叠菜单。菜单在狭窄的显示器上正确折叠，并且子菜单项正确显示。

但是，当我在移动设备上单击子菜单项时，链接不起作用。相反，子菜单折叠，折叠菜单上的顶部菜单项被突出显示，就好像子菜单从未打开过，“点击”通过它到达下面的元素。

当我在桌面浏览器上测试页面时，一切正常。

我已经定制了一些引导样式，但主要用于颜色等。

有任何想法吗？TIA。

4

6 回答 6

40

看起来这是 Bootstrap 的一个已知问题（https://github.com/twitter/bootstrap/issues/4550也可能是https://github.com/twitter/bootstrap/issues/7968），这非常令人失望，因为它已经开放了很长时间并且从未修复过，使用 Bootsrtap 的主要原因是它对响应式设计的承诺。

https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8提出的修复 似乎有效，但它使用的是 Bootstrap 源代码，所以如果您使用的是缩小版本而不使用源脚本，它看起来会有所不同.

我在缩小版本中通过将子字符串“disable-”添加到 touchstart 测试来修复它，因此禁用了此功能。

为此，请在缩小的 bootstrap.min.js 文件中找到子字符串

"ontouchstart"

并将其替换为

"disable-ontouchstart"

感谢@Shmalzy 提供帮助。

于 2013-07-03T06:16:56.570 回答
3

我在 iPad 上遇到了这个问题。我发现我在锚标签上缺少以下内容：

 href="#collapseSection"

其中#collapseSection 是折叠面板的ID。例子：

<div class="panel panel-default">
  <div class="panel-heading"><a class="accordion-toggle" href="#collapseHelp" data-toggle="collapse" data-target="#collapseHelp" data-parent="#accordion">Printing Problems?</a></div>
  <div id="collapseHelp" class="panel-collapse collapse">
    <div class="panel-body">Before you contact the helpdesk, have a look at <a href="Help.asp?PrintHelp">our help system</a>.</div>
  </div>
</div>

您不需要更改缩小的 JavaScript 来纠正此问题，因为它在 Bootstrap 示例中运行良好。这完全是正确格式化 HTML 的问题。

于 2013-11-27T12:23:16.670 回答
0

当菜单项列表太长时，您可能需要在 CSS 中添加以下代码才能在移动浏览器上看到完整的菜单（在 iOS 上测试）：

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}
于 2013-07-11T17:23:11.170 回答
0

我有同样的问题，这个修复对我有用：

https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1

于 2013-12-03T03:19:40.973 回答
0

我尝试使用 Bootstrap 的可折叠面板，而不是作为导航或菜单，而只是一个可折叠面板（如http://www.w3schools.com/bootstrap/bootstrap_collapse.asp），并遇到了同样的问题..

我意识到更改<a...>为有<button...>帮助，至少对我的手机而言（实际上示例也使用button了）。然后，您可以将按钮样式设置为看起来像一个链接，实际上有一个 Bootstrap CSS 类btn-link可以做到这一点，或者您可以添加自己的精美样式。对于我的用例，这是最简单和最简单的解决方案。

于 2016-05-30T17:04:03.423 回答
0

我必须做一些又快又脏的事情，所以我使用了“过去”的做法。
我给了我的链接：<a style="position:relative;z-index:1000" ...

于 2016-12-12T16:17:43.353 回答