如何在 bootstrap 下拉菜单中启用向上和向下箭头键

Question

Bootstrap 3 面板标题包含使用以下代码的下拉菜单。如果打开下拉菜单，向上和向下箭头不会在项目之间移动。如何使用向上和向下箭头键启用下拉导航？

<div class="panel panel-success grid-panel-header">
    <div id='contentCaptionDiv' class="panel-heading">
        <div class="panel-title form-inline"> 
            <a class="btn" href="Show">
                <i class="fa fa-male" aria-hidden="true"></i>
            </a>
            <a class="btn" href="Delete">
                <i class="fa fa-female" aria-hidden="true"></i>
            </a>
        <div class="dropdown" type="button">
            <div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#"> 
                <i class="glyphicon glyphicon-cog"></i>
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
    panel content here
</div>

Answer 1

<script type="text/javascript">
$(document).keydown(function(e) {
  if(e.which == 40 || e.which == 38) {
    openNavbar = $(".dropdown.open");
    if(openNavbar[0]) {
      menu = openNavbar.children(".dropdown-menu");
      menu.find("a").css("outline", "none"); // remove the pesky blue outline
      hovered = menu.find("li:hover");
      if(hovered[0]) {
        if(e.which == 40) hovered.next().children().focus();
        else hovered.prev().children().focus();
      }
      else menu.find("li").first().children().focus();
    }
  }
});
</script>

我还没有找到内置的解决方案，但我做了一个片段，似乎可以完成这项工作。

Answer 2

您的代码不起作用的原因是因为您对 .dropdown-toggle 使用了 <div>。

将其设为 <button> 即可。

真奇怪，连这种元素都不起作用：span.btn.btn-default.

另一个不适用于您的情况的原因：

确保 <li> 中的 <a> 元素具有 href="#" 或 href="" 的属性（一般情况下该属性存在）。

Answer 3

href="#" 确实适用于箭头键。使用它会导致项目 select 上的页面 404 重定向。如果您不想重定向到另一个页面，请使用以下解决方法：href="javascript:" 而不是 href="#"

如何在 bootstrap 下拉菜单中启用向上和向下箭头键

How to enable up and down arrow keys in bootstrap dropdown

javascript

jquery

twitter-bootstrap

drop-down-menu

twitter-bootstrap-3