如何在引导下拉菜单中启用向上和向下箭头键

Posted 2023-02-22

【中文标题】如何在引导下拉菜单中启用向上和向下箭头键

【英文标题】：How to enable up and down arrow keys in bootstrap dropdown

【发布时间】：2015-11-24 01:27:14

【问题描述】：

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>

【问题讨论】：

也许这可以帮助你：***.com/questions/15720107/…

添加role='menu' 只允许向下箭头键激活第一个下拉项。之后按上下方向键没有任何作用

@Andrus 你可能有一些东西干扰了 Bootstrap。这应该有效。看看这里：jsfiddle.net/damphat/WJS9p。确保您允许将焦点放在按钮上（也可能放在子项上）。

我发现这不起作用的一个疯狂原因是在<li> 上省略href="#"。但是你有它们，所以不是这样......

【参考方案1】：

您编码不起作用的原因是因为您将<div> 用于.dropdown-toggle。

将其设为<button> 即可。

很奇怪，连这种元素都不起作用：span.btn.btn-default。

---

另一个不适用于您的情况的原因：

确保<li>s 中的<a> 元素具有href="#" 或href="" 的属性（通常，该属性存在）。

【参考方案2】：

href="#" 确实适用于箭头键。使用这会导致页面 404 在项目选择时重定向。如果您不希望重定向到另一个页面，请使用此解决方法：href="javascript:" 而不是 href="#"

【参考方案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>

我还没有找到内置的解决方案，但我做了一个 sn-p，它似乎可以完成这项工作。