19

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

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

有任何想法吗？

4

2 回答 2

22

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/

于 2013-09-25T12:07:01.353 回答
8

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

  • 因为您使用 a<div>或 a <span>for .dropdown-toggle。让它成为一个<button>，它会工作。奇怪的是，即使是这种元素也不起作用：span.btn.btn-default.
  • 确保您的<a>每个元素内部<li>都有一个属性，href="#"或者href=""通常定义了该属性。
  • 确保你有role="menu"on.dropdown-menu元素。
于 2015-10-09T20:48:19.447 回答