Question

Bootstrap 3面板标题包含下面的代码下拉列表。如果打开下拉列表，则向上和向下箭头不会在项目之间移动。如何使用向上和向下箭头键启用下拉导航？

<div class="panel panel-success grid-panel-header">
    <div id='contentCaptionDiv' class="panel-heading">
        <div class="panel-title form-inline"> 
            <a class="btn" href="Show">
                <i class="fa fa-male" aria-hidden="true"></i>
            </a>
            <a class="btn" href="Delete">
                <i class="fa fa-female" aria-hidden="true"></i>
            </a>
        <div class="dropdown" type="button">
            <div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#"> 
                <i class="glyphicon glyphicon-cog"></i>
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
    panel content here
</div>

Answer 1

您编码无效的原因是因为<div>使用了.dropdown-toggle。

将其设为<button>即可使用。

奇怪的是，即使这种元素也不起作用：span.btn.btn-default。

不适用于您的案件的另一个原因：

确保<a>内的<li>个元素属性为href="#"或href=""（通常属性存在）。

Answer 2

HREF =＆＃34;＃＆＃34;确实适用于箭头键。使用此选项会导致页面404重定向项目选择。如果您不想重定向到另一个页面，请使用以下方法：href =＆＃34; javascript：＆＃34;而不是href =＆＃34;＃＆＃34;

Answer 3

<script type="text/javascript">
$(document).keydown(function(e) {
  if(e.which == 40 || e.which == 38) {
    openNavbar = $(".dropdown.open");
    if(openNavbar[0]) {
      menu = openNavbar.children(".dropdown-menu");
      menu.find("a").css("outline", "none"); // remove the pesky blue outline
      hovered = menu.find("li:hover");
      if(hovered[0]) {
        if(e.which == 40) hovered.next().children().focus();
        else hovered.prev().children().focus();
      }
      else menu.find("li").first().children().focus();
    }
  }
});
</script>

我还没有找到内置的解决方案，但我已经制作了一个片段，似乎可以完成这项工作。

如何在引导程序下拉列表中启用向上和向下箭头键

3 个答案: