如何使Bootstrap按钮下拉菜单可通过键盘选择。

Question

如何使Bootstrap按钮下拉菜单可通过键盘选择。

19

Bootstrap 按钮下拉菜单: http://twitter.github.com/bootstrap/components.html#buttonDropdowns

当我选择一个按钮下拉菜单时，我希望可以使用键盘的上/下箭头在菜单项之间导航，并按 Enter 键选择其中一个，就像 http://twitter.github.com/bootstrap/javascript.html#dropdowns 中所示。

有什么想法吗？

- Mike

1

这可能是一个起点：https://dev59.com/KEnSa4cB1Zd3GeqPM04t - nickhar

2个回答

9

在某些情况下，可能无法正常工作的原因可能有：

因为您在 .dropdown-toggle 中使用了一个 <div> 或 <span>。将其更改为 <button> 就可以解决问题。奇怪的是，即使是这种类型的元素也无法正常工作：span.btn.btn-default。
确保每个 <li> 内部的 <a> 元素具有 href="#" 或 href="" 属性，或者通常已定义该属性。
请确保在 .dropdown-menu 元素上设置了 role="menu"。

- NoOne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- damphat · Accepted Answer

Bootstrap支持原生的键盘导航。

只需将role="menu"添加到您的dropdown-menu中

这是一个示例，保存为 .html 文件并进行测试即可。

<html>
<head>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group">
    <button class="btn btn-default">1</button>
    <button class="btn btn-default">2</button>
    <button class="btn btn-default">3</button>
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">menu</button>
      <ul class="dropdown-menu" role="menu">
        <li> <a href="#">one</a> </li>
        <li> <a href="#">two</a> </li>
        <li> <a href="#">three</a> </li>
      </ul>
    </div>
  </div>
</body>
</html>

http://jsfiddle.net/damphat/WJS9p/