Bootstrap 下拉菜单导致焦点转移到页面顶部答案

【问题标题】：Bootstrap Drop Down Menu Causes Focus to Shift to Top of PageBootstrap 下拉菜单导致焦点转移到页面顶部
【发布时间】：2018-07-27 09:27:34
【问题描述】：

我有一个 Bootstrap 下拉菜单。当我从下拉菜单中选择一个值时，焦点会转移到页面顶部。下拉菜单的类选项如下：

<a class = "btn dropdown-toggle" data-toggle = "dropdown" data-target = "#">
    <span class = "caret"></span>
</a>

jFiddle 示例 here。您需要在结果窗口中向下滚动到查看下拉菜单。

纠正这种行为的最佳方法是什么？

【问题讨论】：

你可以尝试删除#，这会导致这种行为 - jsfiddle.net/W7gbj/1
@JamesT 嗨詹姆斯，我试过删除 #，但它不会改变行为
好的，我会进一步研究。我的道歉
在你的真实代码中，你有空链接吗？这似乎是它这样做的原因..例如，如果你放置 javascript::return false;进入href，它似乎停止了跳到顶部，因为它不再调用同一页面重新加载或寻找不存在的锚。

【解决方案1】：

在您的代码中，您有 # 个锚点。

当有人点击这个时，浏览器会到页面顶部寻找一个不存在的锚点。

即使去掉#，链接也会认为需要刷新页面。

如果您需要锚定样式，请执行以下操作：

<a href = "javascript:return false;">link text</a>

【讨论】：

我碰巧用 javascript:void(0) 完成了一个小提琴，所以我把它扔在那里。希望你不要介意。
ahhh javascript:void(0) 哈哈，我不知道。现在我感到内疚哈哈。谢谢布拉。
在大多数情况下都可以。关于使用哪个 SO 有很多讨论。
我实际上在 bootstrap.js 文件的“btn dropdown-toggle”onclick 事件下添加了一个 event.preventDefault。我没有看到各个下拉选项的href指向#s。有时最简单的答案就在您面前

【解决方案2】：

已接受的答案有效，但第二个问题是选择列表过长。如果下拉列表有很多项目，例如国家，那么用户可以向上或向下滚动以选择一个。整个页面滚动。然后，在用户做出选择后，滚动位置将停留在该位置。

我通过应用已接受的答案并添加以下内容来解决此问题：

@ViewChild('toggleButton') toggleButton: ElementRef;

切换按钮上的属性，然后调用：

this.toggleButtton.nativeElement.focus();

当做出选择时。我知道出于 Web Worker 的原因不推荐使用 nativeElement，但我没有使用 Web Worker，所以它对我来说是一个解决方案。

使用 Bootstrap 4.1.0。

【讨论】：