CSS Bootstrap 折叠菜单链接在移动设备上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17435359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
提问by isapir
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.
我已经定制了一些引导程序样式，但主要用于颜色等。
Any ideas? TIA.
有任何想法吗？TIA。
回答by isapir
Looks like this is a known issue with Bootstrap (https://github.com/twitter/bootstrap/issues/4550and 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.
看起来这是 Bootstrap 的一个已知问题（https://github.com/twitter/bootstrap/issues/4550也可能是https://github.com/twitter/bootstrap/issues/7968），这非常令人失望，因为它是开放了很长时间，从未修复，使用 Bootsrtap 的主要原因是它对响应式设计的承诺。
The fix proposed at https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8seems 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.
在https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 上提出的修复 似乎有效，但它使用的是 Bootstrap 源代码，所以如果您使用的是缩小版本并且不使用源脚本，它看起来会有所不同.
I fixed it in my case in the minified version by adding the substring "disable-" to the touchstart test, therefore disabling this functionality.
在我的缩小版本中，我通过在 touchstart 测试中添加子字符串“disable-”来修复它，因此禁用了此功能。
To do that in your minified bootstrap.min.js file, find the substring
要在缩小的 bootstrap.min.js 文件中执行此操作，请找到子字符串
"ontouchstart"
and replace it with
并将其替换为
"disable-ontouchstart"
Thank you @Shmalzy for trying to help.
感谢@Shmalzy 试图提供帮助。
回答by Witchfinder
I encountered this issue on iPad. I found I was missing the following on the anchor tags:
我在 iPad 上遇到了这个问题。我发现我在锚标签上遗漏了以下内容：
href="#collapseSection"
Where #collapseSection is the ID of the collapsing panel. Example:
其中 #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>
You should notneed to alter the minified JavaScript to correct this issue, as it works fine in the Bootstrap examples. It's all a matter of formatting your HTML correctly.
你应该没有需要改变的精缩JavaScript来解决这个问题，因为它工作在引导例子罚款。这完全是正确格式化 HTML 的问题。
回答by Kavin Mehta
I had the same problem, this fix worked for me:
我遇到了同样的问题，此修复程序对我有用：
https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1
https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1
回答by mmona
I tried collapsible panels with Bootstrap not as a navigation or menu, but just a collapsible panel (like this http://www.w3schools.com/bootstrap/bootstrap_collapse.asp), and came across the same problem..
我尝试使用 Bootstrap 的可折叠面板不是作为导航或菜单，而是作为可折叠面板（例如http://www.w3schools.com/bootstrap/bootstrap_collapse.asp），但遇到了同样的问题。
I realised that changing <a...>to <button...>helped, at least for my phone (indeed the example uses buttontoo). You can then style the button to look like a link, in fact there is a Bootstrap CSS class called btn-linkwhich does exactly this, or you can add your own fancy style. For my use case that was the simplest and easiest solution.
我意识到更改<a...>为有<button...>帮助，至少对于我的手机（实际上该示例也使用button了）。然后，您可以将按钮的样式设置为看起来像一个链接，实际上有一个名为 Bootstrap CSS 的类就是btn-link这样做的，或者您可以添加自己的花哨样式。对于我的用例，这是最简单和最简单的解决方案。
回答by Itay Moav -Malimovka
I had to do something quick and dirty, so I used what used to do in the "old days".
I gave my links: <a style="position:relative;z-index:1000" ...
我不得不做一些快速而肮脏的事情，所以我使用了过去“过去”所做的事情。
我给了我的链接：<a style="position:relative;z-index:1000" ...
回答by Camaleo
when the menu items list is too long, you might need to add the following code in your CSS to be able to see the complete menu on mobile browsers (tested on iOS):
当菜单项列表太长时，您可能需要在 CSS 中添加以下代码才能在移动浏览器上看到完整的菜单（在 iOS 上测试）：
@media (max-width: 1023px) {
.nav-collapse {
overflow-y: auto;
}
}
