twitter-bootstrap 如何通过键盘选择引导按钮下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15720107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap button dropdown menu selectable by keyboard
提问by Mike
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?
有任何想法吗？
回答by damphat
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>
回答by NoOne
Possible reasons that this may not work in some cases:
在某些情况下这可能不起作用的可能原因：
- Because you use a
<div>or a<span>for.dropdown-toggle. Make it a<button>and it will work. Strange enough, not even this kind of element works:span.btn.btn-default. - Make sure your
<a>element inside each<li>have an attribute ofhref="#"orhref=""or generally has the attribute defined. - Make sure you have the
role="menu"on the.dropdown-menuelement.
- 因为您使用 a
<div>或 a<span>for.dropdown-toggle。让它成为一个<button>，它会起作用。奇怪的是，甚至这种元素都不起作用：span.btn.btn-default. - 确保你的
<a>里面每个元素<li>都有的属性href="#"或href=""或一般具有定义的属性。 - 确保您
role="menu"在.dropdown-menu元素上有 。
![twitter-bootstrap Less 和 Bootstrap：如何使用 span3（或 spanX [任意数字]）类作为 mixin？](/res/img/loading.gif)