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

Question

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

Mik*_*ike 19 javascript jquery twitter-bootstrap

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

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

有任何想法吗？

Answer 1

dam*_*hat 19

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>

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/damphat/WJS9p/

请记住,无论你给什么`role ="menu"`都需要能够获得焦点.请参见http://stackoverflow.com/a/1600194/601386.只有可以获得焦点的元素才能绑定到键盘事件. (5认同)

Answer 2

NoO*_*One 7

在某些情况下这可能不起作用的可能原因:

因为你使用a <div>或<span>for .dropdown-toggle.做它<button>,它会工作.奇怪的是,甚至这种元素都不起作用:span.btn.btn-default.
确保您的<a>元素中的每个<li>具有的属性href="#"或href=""或一般具有定义的属性.
请确保您有role="menu"在上.dropdown-menu的元素.

归档时间：	12 年，7 月前
查看次数：	13726 次
最近记录：	9 年，1 月前