时间戳

首页 > 解决方案 > 如何防止从顶级下拉锚点导航？

javascript - 如何防止从顶级下拉锚点导航？

问题描述

我正在为主导航菜单使用基本的引导 v3 下拉菜单。我的代码看起来像这样：

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

当然，Level 1没有目的地，它只是切换下拉菜单。当您选择 时Level 2，您会到达一个动态生成我们称之为 a 的网页，JobId然后立即将您重定向到最终目的地，并JobId在 URL 中使用查询字符串作为查询字符串。

这是我的问题：如果用户右键单击Level 2并选择“在新选项卡中打开”，那么一切都很好，因为他们JobId首先完成了该过程，最终得到一个新的JobId. 但是，如果他们不小心右键单击Level 1并选择“在新选项卡中打开”，那么他们会得到与当前所在页面相同的副本，因此最终会得到 2 个相同的浏览器选项卡，JobId这对我们的应用程序来说是一场灾难。

我已经尝试过：我尝试将顶级href属性设置为#，尝试将其设为空白，尝试href完全省略，并且我还尝试将 URL 提供给我们的“欢迎”屏幕以防万一。

唯一有“某种”作用的是将顶级菜单项链接到欢迎屏幕，但它有一个副作用。第一次加载页面时，下拉菜单完美运行。但是，一旦您选择了一次菜单项，那么下次您单击顶级项时，您不会显示下拉菜单，而是会进入欢迎屏幕。

Level 1除了显示下拉菜单之外， 我还有什么其他想法可以防止这些项目做任何事情吗？

标签： javascripthtmltwitter-bootstrap-3

解决方案

为什么 1 级需要成为锚？仅仅因为这就是 Bootstrap 的布局，它不必是那样。事实上，由于 1 级锚点已经在列表项中，只需删除锚点并将“1 级”文本放置在列表项中即可。

推荐阅读