2013-03-30 57 views
16
使引导按钮的下拉菜单中选择

引导按钮,下拉菜单:http://twitter.github.com/bootstrap/components.html#buttonDropdowns如何通过键盘

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

任何想法?

+1

这可能是一个起点:http://stackoverflow.com/questions/1409214/keyboard-navigation-for-menu-using-jquery – nickhar

回答

17

Bootstrap本身支持键盘导航。

只需添加角色= “菜单”下拉菜单

下面是一个例子,只是保存为.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/

+5

记住虽然,无论你给'角色=“菜单“'需要能够获得关注。请参阅http://stackoverflow.com/a/1600194/601386。只有可以接收焦点的元素才能绑定到键盘事件。 – flu

7

可能的原因是这个由于您使用<div>.dropdown-toggle一个<span>

  • :可能无法在某些情况下工作。使它成为<button>,它会工作。奇怪的是,甚至没有这种元素的作品:span.btn.btn-default
  • 确保您的每个<li>中的<a>元素具有href="#"href=""的属性或通常具有定义的属性。
  • 确保您在.dropdown-menu元素上有role="menu"