Question

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

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

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

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

有什么想法吗？ TIA。

Answer 1

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

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

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

要在缩小的bootstrap.min.js文件中执行此操作，请找到子字符串

"ontouchstart"

并将其替换为

"disable-ontouchstart"

感谢@Shmalzy尝试提供帮助。

Answer 2

我在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的问题。

Answer 3

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

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}

Answer 4

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

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

Answer 5

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

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

Answer 6

我必须做一些快速而又肮脏的事情，所以我使用了旧时代的习惯＆＃34;。
我提供了我的链接：<a style="position:relative;z-index:1000" ...

Bootstrap折叠菜单链接不适用于移动设备

6 个答案: