Angularjs 如何触发点击焦点？

看一看:

Html:

正如您所看到的，下拉菜单仅在鼠标单击时进行切换，而不在使用tab键聚焦时进行切换，甚至在单击之后按enter键

---

我怎样才能使它也能触发“焦点与选项卡”的下拉菜单？

您离得不远，但您的HTML模板缺少一些元素。将其更改为：

<div class="btn-group" dropdown keyboard-nav is-open="status.isopen">
  <input id="simple-btn-keyboard-nav" ng-focus="toggleDropdown($event)" dropdown-toggle>
  <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>

您缺少

打开

标志。 我添加了一个切换下拉列表的

ng focus

事件

---

现在，您必须找到一种方法来防止

单击

和

聚焦

事件相互冲突。我没有花时间解决这个问题，因为我对你的UI还不太了解。

YEP，现在我得弄清楚当你用鼠标点击它时，如何防止它两次开火。你可能想考虑使用Type的另一个UX。不管怎样，祝你好运@Tachi，你能帮我找出防止鼠标点击两次的解决方案吗？

 <div ng-controller="DropdownCtrl">
        <!-- Simple dropdown -->
        <div class="btn-group" dropdown keyboard-nav>
            <input id="simple-btn-keyboard-nav" dropdown-toggle>
            <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
                <li role="menuitem"><a href="#">Action</a></li>
                <li role="menuitem"><a href="#">Another action</a></li>
                <li role="menuitem"><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

<div class="btn-group" dropdown keyboard-nav is-open="status.isopen">
  <input id="simple-btn-keyboard-nav" ng-focus="toggleDropdown($event)" dropdown-toggle>
  <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>