如何使用 keydown 事件打开下拉菜单？

Question

我正在使用下拉菜单的引导示例。它只需单击鼠标即可打开和关闭。我想知道如何配置此代码以在使用键盘时模仿相同的功能？

我不想创建新的自定义控件。通过点击“选项卡”，我可以从一个可聚焦元素移动到另一个。

我尝试过的： 我附加了 role="button" 属性以及 tabindex=0。当我点击标签直到我到达下拉菜单图标（chevron-down）时，当我点击空格键时它会打开菜单。但是我无法关闭下拉菜单，而是保持打开状态。谁能分享有关如何打开和关闭此菜单的任何想法？

<div class="appExperience small-tile">
<div class="blue-bar">
    <h2 class="tile-header">APPLICATION EXPERIENCE</h2>
    <span class="dropdown hidden-xs">
        <i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
           role="button"
           aria-labledby="Expand Application Experience Summary Dropdown Menu"
           ng-src="{{dropdown_appExperience}}"
           data-toggle="dropdown"
           tabindex="0"
           alt="Expand Application Experience Summary Dropdown Menu"></i>
        <ul class="dropdown-menu appExperience tileContextMenu">
            <li>
           List Item 1
            </li>
            <li>
           List Item 2
            </li>
             ...

Answer 1

最终，您可以从 JavaScript 触发点击事件。如果你熟悉 jQuery，你可以这样做：

$(window).on("keydown", function(){ $(".dropdown").trigger("click") });