Bootstrap 折叠菜单链接在移动设备上不起作用 [英] Bootstrap Collapsed Menu Links Not Working on Mobile Devices

问题描述

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

I am using a collapsible menu with submenu items in a navigation bar. The menu collapses properly on narrow displays, and the submenu items display properly.

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

When I click a submenu item, however, on a mobile device, the link doesn't work. Instead, the submenu collapses, and top menu item on the collapsed menu is highlighted, as if the submenu was never opened and the "click" went through it to the element that was underneath.

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

When I test the page on a desktop browser everything works properly.

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

I have customized some bootstrap styles, but mostly for colors etc.

有什么想法吗?TIA.

Any ideas? TIA.

推荐答案

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

Looks like this is a known issue with Bootstrap (https://github.com/twitter/bootstrap/issues/4550 and possibly also https://github.com/twitter/bootstrap/issues/7968) which is very disappointing because it's been open for a long time and never fixed, and the primary reason to use Bootsrtap is its promise of responsive design.

在 https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed5903b47f01aceed5903b 提出的修复似乎是可以工作，但它使用的是 Bootstrap 源代码，因此如果您使用的是缩小版并且没有使用源脚本，它看起来会有所不同.

The fix proposed at https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 seems to work, but it is using the Bootstrap source code, so if you are using the minified version and are not using the source scripts it looks differently.

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

I fixed it in my case in the minified version by adding the substring "disable-" to the touchstart test, therefore disabling this functionality.

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

To do that in your minified bootstrap.min.js file, find the substring

"ontouchstart"

并将其替换为

"disable-ontouchstart"

感谢@Shmalzy 提供帮助.

Thank you @Shmalzy for trying to help.

这篇关于Bootstrap 折叠菜单链接在移动设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！