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。

推荐答案

看起来这是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 / 25e8eeb47f01aceed57cb2715036a69395892fa8 似乎有效，但是它使用的是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.

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

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屋！