Bootstrap 折叠菜单链接在移动设备上不起作用

Posted 2023-03-06

【中文标题】Bootstrap 折叠菜单链接在移动设备上不起作用

【英文标题】：Bootstrap Collapsed Menu Links Not Working on Mobile Devices

【发布时间】：2013-06-30 09:32:19

【问题描述】：

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

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

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

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

有什么想法吗？ TIA。

【问题讨论】：

你可以在这里或在 jsFiddle 中发布你的代码吗？

@Schmalzy -- 那里有相当多的布局，我还没有设法编写一个 reduce 测试用例。我可以给你发送一个实时页面的链接，但我不想在这里公开发布它，因为它处于测试阶段。

@lgal 当然，把链接发给我。

【参考方案1】：

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

【参考方案2】：

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

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

【参考方案3】：

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

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

【参考方案4】：

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

【讨论】：

我知道你的答案是几年前的，但它救了我。你是对的，这样更干净。

【参考方案5】：

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

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

【参考方案6】：

看起来这是 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 提供帮助。

【讨论】：

我遇到了同样的问题。我尝试了建议的代码修复，但这似乎没有帮助。最终，github.com/twitter/bootstrap/issues/7968 中的简单 CSS 更正成功了。

@GarrettVlieger 你在什么设备上测试过这个？我在 android 平板电脑和 Android 手机上进行了测试，上面的修复似乎可以解决问题。

我在安卓手机上试了一下。

感谢@GarrettVlieger，这很有帮助，因为我不想在本地托管脚本来解决问题。新链接似乎是：github.com/twbs/bootstrap/issues/7968

更新到“disable-ontouchstart”解决了这个问题。谢谢！