如何阻止Bootstrap v3顶级下拉锚点触发页面导航？

针对你遇到的这个Bootstrap v3下拉菜单的问题，我给你几个实用的解决方案，都能让Level 1项只触发下拉、不执行任何导航操作：

方案1：通过JavaScript阻止默认跳转（推荐，改动最小） #

直接给Level 1的<a>标签添加onclick事件阻止默认行为，同时保留data-toggle="dropdown"来触发下拉：

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="event.preventDefault();">Level 1</a>
  <ul class="dropdown-menu">
    <!-- 注意：Bootstrap v3要求下拉菜单的链接必须包裹在<li>内，修正你原代码的小问题 -->
    <li><a href="somelink">Level 2</a></li>
  </ul>
</li>

为什么这个方案管用： #

• event.preventDefault()会彻底阻止<a>标签的默认跳转行为，不管href设为#还是其他值，都不会触发页面导航
• data-toggle="dropdown"依然能正常触发Bootstrap的下拉展开逻辑，不影响原有交互
• 右键点击Level 1选择“新标签页打开”时，会跳转到当前页面的#锚点，但不会生成新的JobId（因为JobId是在点击Level 2时才动态生成的），完全避免了共用JobId的故障

方案2：将触发元素替换为Button（彻底避免跳转） #

如果不想用<a>标签，也可以换成<button>作为下拉触发元素，因为按钮本身没有默认的导航行为：

<li class="dropdown">
  <button class="btn btn-link dropdown-toggle" data-toggle="dropdown" type="button">Level 1</button>
  <ul class="dropdown-menu">
    <li><a href="somelink">Level 2</a></li>
  </ul>
</li>

注意事项： #

• 使用btn btn-link类可以让按钮看起来和普通链接完全一致，不需要额外调整太多样式
• 右键点击按钮时，大部分浏览器不会显示“在新标签页打开”的选项，从根源上避免了误操作的可能

补充：修正你原代码的一个小问题 #

你原代码里的下拉菜单直接把<a>放在<ul class="dropdown-menu">下，这不符合Bootstrap v3的规范，正确的结构应该是把链接包裹在<li>内，否则可能出现样式错乱或交互异常的情况，上面的示例已经帮你修正了这个问题。

内容的提问来源于stack exchange，提问作者drumichael611