Как сделать выпадающее меню кнопки бутстрапа, выбираемое с клавиатуры

Выпадающее меню кнопки Bootstrap: http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Когда я выбираю раскрывающийся список кнопок, я бы хотел использовать клавиатуру вверх/вниз для перемещения между пунктами меню и нажмите Enter, чтобы выбрать один, как http://twitter.github.com/bootstrap/javascript.html#dropdowns

Любые идеи?

Ответ 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/

Ответ 2

Возможные причины, по которым это может не работать в некоторых случаях:

Потому что вы используете <div> или <span> для .dropdown-toggle. Сделайте это <button>, и он будет работать. Странно, даже этот тип элементов не работает: span.btn.btn-default.
Убедитесь, что ваш элемент <a> внутри каждого <li> имеет атрибут href="#" или href="" или обычно имеет указанный атрибут.
Убедитесь, что у вас есть role="menu" в элементе .dropdown-menu.