twitter-bootstrap - Bootstrap 下拉菜单导致焦点转移到页面顶部

Question

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

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

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

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

Answer 1

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

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

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

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

<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，所以它对我来说是一个解决方案。

使用引导 4.1.0。