Question

引导按钮下拉列表：http://twitter.github.com/bootstrap/components.html#buttonDropdowns

当我选择一个按钮下拉菜单时，我想使用键盘向上/向下在菜单项之间导航并按Enter键选择一个，就像http://twitter.github.com/bootstrap/javascript.html#dropdowns

一样

有什么想法吗？

Answer 1

Bootstrap原生支持键盘导航。

只需将 role =“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/

Answer 2

在某些情况下，这可能不起作用的可能原因：

因为<div>使用<span>或.dropdown-toggle。将其设为<button>即可。奇怪的是，甚至这种元素都不起作用：span.btn.btn-default。
确保每个<a>中的<li>元素的属性为href="#"或href=""，或者通常已定义属性。
确保role="menu"元素上有.dropdown-menu。

如何通过键盘选择引导按钮下拉菜单

2 个答案: