javascript - 如何使 Bootstrap 按钮下拉菜单可以通过键盘选择

标签 javascript jquery twitter-bootstrap

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

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

有什么想法吗?

最佳答案

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>

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

关于javascript - 如何使 Bootstrap 按钮下拉菜单可以通过键盘选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15720107/

相关文章:

javascript - react 数据网格自定义行格式化程序

javascript - 通过单个 Ajax 调用向 Spring Boot 提交多个表单

javascript - 如何将下拉值获取到 .php 文件中

angularjs - 如何为标记为必填的字段定义 CSS 样式?

css - 将 Bootstrap 3 Fancy Tab 元素转换为 Bootstrap 4

javascript - 如何在 JavaScript 中查找 HTML 元素的位置?

javascript - Mustache 循环遍历包含包含对象的数组的对象

javascript - Jquery:如何捕获不在<div>区域内的点击事件?

javascript - 如何在javascript或/和jquery中获取 "this"的对象名称?

css - 如何在 Bootstrap 表单后面获取页面背景图像