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

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

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

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

我定制了一些引导风格，但主要是颜色等

---

有什么想法吗？TIA.

这似乎是Bootstrap的一个已知问题（也可能是），这是非常令人失望的，因为它已经开放了很长时间，从未修复过，使用Bootsrtap的主要原因是它承诺的响应性设计

在中提出的修复似乎可行，但它使用的是引导源代码，因此，如果您使用的是缩小版本，而不是使用源脚本，则看起来会有所不同

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

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

"ontouchstart"

并将其替换为

"disable-ontouchstart"

---

感谢@Shmalzy的帮助。

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

---

我在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来纠正这个问题，因为它在引导示例中工作得很好。这都是正确设置HTML格式的问题。

我也有同样的问题，这个修复程序对我有效：

---

我尝试了使用引导功能的可折叠面板，不是作为导航或菜单，而是一个可折叠面板（像这样），但遇到了相同的问题

---

我意识到将

更改为

会有所帮助，至少对我的手机是如此（实际上，这个示例也使用了

按钮）。然后，您可以将按钮的样式设置为链接，事实上，有一个名为
btn link
的引导CSS类正是这样做的，或者您可以添加自己的花式样式。对于我的用例来说，这是最简单和最简单的解决方案。
我必须快速而肮脏地做一些事情，所以我使用了“旧时代”的做法。

我给出了我的链接：
你能把你的代码发布在这里还是JSFIDLE中？@Schmalzy——那里有很多布局，我还没有写一个reduce测试用例。我可以向您发送一个指向实时页面的链接，但不希望在此处公开发布，因为它是测试版。@lgal当然，请将链接发送给我。我也遇到过同样的问题。我尝试了建议的代码修复，但似乎没有帮助。最后，简单的CSS修正完成了这个技巧。@GarrettVlieger你在什么设备上测试过这个？我在安卓平板电脑和安卓手机上进行了测试，上面的修复似乎起到了作用。我在安卓手机上进行了尝试。谢谢@GarrettVlieger，这很有帮助，因为我不想在本地托管脚本来修复这个问题。新的链接似乎是：更新为“禁用ontouchstart”解决了这个问题。谢谢我知道你的答案是几年前的，但它救了我。你说得对，这样更干净。
<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>