Bootstrap 下拉菜单：用作 Bootstrap 下拉按钮的锚标记保持其默认行为答案

【问题标题】：Bootstrap dropdown: Anchor tag used as Bootstrap dropdown button keeps its default behaviourBootstrap 下拉菜单：用作 Bootstrap 下拉按钮的锚标记保持其默认行为
【发布时间】：2018-07-19 12:51:31
【问题描述】：

我有以下代码，我在 Bootstrap 下拉菜单中使用 Anchor 标记而不是按钮。问题是，尽管有人说here，当我单击锚标记（标记为Action）时，浏览器会打开锚标记，而不仅仅是打开菜单。也就是说，Anchor 标签的默认行为并没有被阻止。

我们使用 Bootstrap v3，但并非在所有环境中都会发生这种情况，目前仅在 prod 中，有时在我的本地计算机上。这发生在所有已知的浏览器上，例如桌面版的 Chrome、IE、FF，非桌面版没有这个功能，所以我们没有在那里测试。

<div class="dropdown btn-group">
<a class="btn dropdown-toggle" role="button" data-toggle="dropdown" href="#">
  Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
  <li><a href="#">Foo</a></li>
  <li><a href="#">Bar</a></li>
</ul>

最后，我们使用以下代码行来取消默认行为，但我们从未弄清楚这种情况仅在一种环境中而不在其他环境中发生的根本原因：

$(".btn .dropdown-toggle").click(function(event){ event.preventDefault();})

【问题讨论】：

请您检查一下标签自定义样式并提及您用于测试代码的设备。

标签： javascript html twitter-bootstrap

【解决方案1】：

为什么需要href="#"？

使用href="" 而不是href="#"。

【讨论】：

href 属性的值并不重要，在这两种情况下都不起作用。有时我们甚至有像“/portfolio/”这样的值而不是“#”。问题是相同的代码在一个环境中工作而不是在另一个环境中工作。所以问题是导致默认 HTML 行为在一种环境中而不是在另一种环境中占主导地位的原因。
HTML 在所有浏览器环境中都是相同的，边缘情况除外。请添加 plunkr 或 fiddle 以及您正在使用的任何其他脚本。
值得尝试为 a 标签添加阻止默认值 <a onclick="callback()" callback(event) { event.preventDefault(); }
是的，使用 onclick 事件来防止默认行为是我的临时解决方案。但我们正在寻找一种解决方案，可以解释为什么这只发生在 prod 环境中。

【解决方案2】：

尝试从代码中删除

role="button"

【讨论】：

我应用了更改，没有任何区别。
尝试创建一个小提琴链接并在此处分享，以便调试问题

【解决方案3】：

为什么是锚？

您错过了引导文档中显示的 data-target 属性

https://getbootstrap.com/docs/3.3/javascript/#dropdowns

【讨论】：