Bootstrap Dropdown菜单使焦点转移到页面顶部

Question

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

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

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

解决此问题的最佳方法是什么？

Answer 1

在你的代码中你有＃anchors。

当有人点击此处时，浏览器将转到页面顶部以搜索不存在的锚点。

即使您删除＃，链接也会认为需要刷新页面。

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

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

http://jsfiddle.net/W7gbj/7/

Answer 2

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

我通过应用可接受的答案并添加了一个

来解决此问题

@ViewChild('toggleButton') toggleButton: ElementRef;

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

this.toggleButtton.nativeElement.focus();

进行选择时。我知道出于Web Worker的原因不建议使用nativeElement，但是我不使用Web Worker，因此它是我的解决方案。

使用Bootstrap 4.1.0。