有没有办法为每个事件做一个按键？

Question

我正在尝试为此 bootstrap 手风琴设置辅助功能。我在每个 <a> 标签中添加了 tabindex=0，我试图确保如果用户点击标签，它将打开相应的 dropdown/accordion。但是到目前为止，当用户点击选项卡按钮时，我的代码会打开每个手风琴选项。有没有办法在按键时执行 forEach？

$('.accordion-toggle').keydown(function(e) {
  if (e.keyCode == 13) {
    $('.collapse').addClass('show');
  } else {
    $('.collapse').removeClass('show')
  }
});

<a 
  class="text-left w-100 btn btn-link accordion-toggle" 
  tabindex="0" 
  data-toggle="collapse" 
  data-target="#collapseEight" 
  aria-expanded="true" 
  aria-controls="collapseEight">
    item 1 <i class="arrow down"></i>
</a>

       <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion">
        <p> Content for this section</p>
        </div>
<a 
  class="text-left w-100 btn btn-link accordion-toggle" 
  tabindex="0" 
  data-toggle="collapse" 
  data-target="#collapseEight" 
  aria-expanded="true" 
  aria-controls="collapseEight">
    item 2 <i class="arrow down"></i>
</a>


       <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion">
        <p> Content for this section</p>
        </div>

Answer 1

您需要使用 document.activeElement，它只会作用于 selected 手风琴，然后找到正确的手风琴父级和 select 其中的折叠元素..您需要运行文档级别的 keydown 并检查焦点项是否是手风琴项，下面的解决方案是纯 Javascript 和 jQuery 的混合：

$(document).keydown(function(){
    let focused = document.activeElement;
    const pattern = /(?:^|\s)accordion-toggle(?:\s|$)/
    if (document.activeElement.className.match(pattern)) {
        $('.collapse').removeClass('show'); 
        let element = document.activeElement;
        $(element).closest('.accordion-item').find('.collapse').addClass('show');
    }
});

演示：https://jsfiddle.net/k86fj5ex/

Answer 2

不确定这是否是您想要的，但是...如果按下 tab 键，则：

设置了一个小延迟以允许文档移动 tabindex 焦点
如果关注的元素是手风琴控件，则折叠所有手风琴，然后展开与控件 data-target 对应的手风琴。

$(document).keydown(function(e) {
  //console.log(e.keyCode)
  if (e.keyCode == 9) {
    setTimeout(() => {
      let $focused = $(':focus');
      if ($focused.hasClass('accordion-toggle')) {
        //close all open ones
        $('.collapsed').removeClass('show');
        $($focused.data('target')).addClass('show')
      }
    }, 50)
  }
});

.collapsed {
  display: none;
}

.collapsed.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight">
    item 1 <i class="arrow down"></i>
</a>
<div id='collapseEight' class='collapsed'>Text from collapseEight</div>
<a class="text-left w-100 btn btn-link accordion-toggle" tabindex="0" data-toggle="collapse" data-target="#collapseNine" aria-expanded="true" aria-controls="collapseNine">
    item 2 <i class="arrow down"></i>
</a>


<div id='collapseNine' class='collapsed'>Text from collapseNine</div>

有没有办法为每个事件做一个按键？

Is there a way to do a keydown forEach event?

javascript

bootstrap-4