Question

我正在使用下拉菜单的bootstrap示例。它通过鼠标点击打开和关闭它应该如何。我想知道如何在使用键盘时配置此代码以模仿相同的功能？

我不想创建新的自定义控件。通过点击＆＃34; tab＆＃34;我可以从一个可聚焦元素移动到另一个聚焦元素。

我尝试了什么： 我已经附上了角色=＆＃34;按钮＆＃34;属性，以及tabindex = 0。当我按Tab键直到我到达下拉菜单图标（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") });

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

1 个答案: