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

Question

Bootstrap button dropdown: http://twitter.github.com/bootstrap/components.html#buttonDropdowns Bootstrap按钮下拉列表： http ： //twitter.github.com/bootstrap/components.html#buttonDropdowns

When i select a button dropdown, i would like to use keyboard up/down to navigate between menu items and press enter to select one, just like http://twitter.github.com/bootstrap/javascript.html#dropdowns 当我选择一个按钮下拉菜单时，我想使用键盘向上/向下在菜单项之间导航，然后按Enter键选择一个，就像http://twitter.github.com/bootstrap/javascript.html#dropdowns

Any ideas? 有任何想法吗？

Answer 1

Bootstrap has native support for keyboard navigation. Bootstrap本身支持键盘导航。

Just add role="menu" to your dropdown-menu 只需将role =“menu”添加到您的下拉菜单中即可

Here is an example, just save as .html and take a test 这是一个例子，只需保存为.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/ http://jsfiddle.net/damphat/WJS9p/

Answer 2

Possible reasons that this may not work in some cases: 在某些情况下这可能不起作用的可能原因：

Because you use a <div> or a <span> for .dropdown-toggle . 因为您使用<div>或<span>进行.dropdown-toggle 。 Make it a <button> and it will work. 使它成为<button> ，它将工作。 Strange enough, not even this kind of element works: span.btn.btn-default . 奇怪的是，甚至这种元素都span.btn.btn-default ： span.btn.btn-default 。
Make sure your <a> element inside each <li> have an attribute of href="#" or href="" or generally has the attribute defined. 确保每个<li>中的<a>元素具有href="#"或href=""的属性，或者通常已定义属性。
Make sure you have the role="menu" on the .dropdown-menu element. 确保.dropdown-menu元素上有role="menu" 。

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

问题描述

2 个解决方案

解决方案1
19 2013-09-25 12:07:01

解决方案2
7 2015-10-09 20:48:19

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

问题描述

2 个解决方案

解决方案1 19 2013-09-25 12:07:01

解决方案2 7 2015-10-09 20:48:19

解决方案1
19 2013-09-25 12:07:01

解决方案2
7 2015-10-09 20:48:19