Javascript 如何使用键盘控件创建切换按钮？

我有一个简单的信息按钮。单击此按钮时，将打开一个信息文本框，再次单击该按钮时，该信息框将消失或“关闭”

我尝试使用键盘替代品来实现同样的行为。现在，当我按下“回车”键时，信息按钮再次打开信息文本框。但是，当我第二次按enter键时，信息框不会关闭，而是保持显示状态

当前代码：

//HTML
    <h2 class="tile-header">CCIR</h2>
        <span> 
            <img
            role="button"
            id="cis-info-button"
            aria-labeledby="Information for ccir Summary"
                ng-click="vm.showHelp()"
                ng-keydown="vm.keyHelp ($event)"
            class="info-icon"
            ng-src="{{infosrc_ccir}}"
            alt="ccir Summary Information"
            width="10" height="10">
        </span>      

//JS

  function showHelp()
    {
        var helpConfig =
            {
                animation: true,
                templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummaryInfo.html',
                size: 'ccir-summary-help'
            };
        $modal.open(helpConfig);
    }

    function keyHelp(e)
    {
        if (e.keyCode === 13 || e.charCode === 32)
        {
            showHelp();
        }
    }

//HTML
CCIR
//JS
函数showHelp（）
{
var helpConfig=
{
动画：没错，
templateUrl:'scripts/tiles/ccirSummary/views/ccirSummaryInfo.html'，
大小：“ccir摘要帮助”
};
$modal.open（helpConfig）；
}
功能键帮助（e）
{
if（e.keyCode==13 | | e.charCode==32）
{
showHelp（）；
}
}

这应该行得通

$(document).ready(function() {
    $(document).bind('keydown',function(e){
       if(e.keyCode === 13 || e.charCode === 32) {
          showHelp();
       }
    });
});

---

如果没有URL来测试它，我建议尝试两件事：

我看不到你把焦点移到按钮的地方。如果没有获得焦点，按钮不会被触发。这意味着您必须监听整个文档上的按键

使用

而不是

，因为

角色

不提供键盘支持（您必须编写所有脚本）

---

情态动词的大多数问题（正如你所描述的）归结为键盘焦点。我有一个来自另一个显示焦点管理的东西。当您激活模式时，您将看到您可以按Enter键打开、关闭、打开、关闭等。仅通过管理焦点就可以做到这一点。

不幸的是，这与我之前使用的代码相同，只是jquery的不同之处在于它绑定到文档而不是图像上。我想这可能是你的问题。你有一个URL来查看这一点吗？焦点会在本机使用tab键带到按钮上。2.ng键在按下空格键/回车键时触发模式时为其提供键盘支持。如果您希望用户按enter键打开，然后按enter键关闭（其间没有其他操作），则您需要一个功能来关闭模式（

$model.close（helpConfig）；

），或者另一个按钮来完成此任务。此外，ng keydown对于使用正确的元素（即

）来说是一个糟糕的代理。你有URL吗？不幸的是没有，我只能分享我能分享的，所以这有点令人沮丧