如何通过键盘选择引导按钮下拉菜单 [英] How to make bootstrap button dropdown menu selectable by keyboard
问题描述
Bootstrap按钮下拉列表： http://twitter.github.com/bootstrap/components。 html＃buttonDropdowns
Bootstrap button dropdown: http://twitter.github.com/bootstrap/components.html#buttonDropdowns
当我选择一个按钮下拉菜单时，我想使用键盘上/下来在菜单项之间导航，然后按Enter键选择一个，就像 http://twitter.github.com/bootstrap/javascript.html#dropdowns
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
有什么想法吗？
推荐答案
Bootstrap有键盘导航的原生支持。
只需将 role =menu 添加到 下拉菜单
Just add role="menu" to your dropdown-menu
这是一个例子，只需保存为.html并进行测试
Here is an example, just save as .html and take a test
<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/
这篇关于如何通过键盘选择引导按钮下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
