Question

看看：

http://plnkr.co/edit/lW0hNYXzyibLujgSxAzi?p=preview

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {

  $scope.status = {
    isopen: false
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };
});

HTML：

 <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>

正如您所看到的，只有鼠标点击才能看到下拉菜单切换，但是不能通过选项卡进行焦点切换，甚至可以在此之后按Enter键。

如何制作它以便它还可以通过TAB触发焦点下拉？

Answer 1

你不远，但你的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>

您错过了is-open标志。我添加了一个ng-focus事件，可以切换您的下拉列表。

现在，您必须找到一种方法来防止click和focus事件相互冲突。我没有花时间解决这个问题，因为我还没有关于你的UI。

如何触发点击焦点？

1 个答案: