如何捕获带有DIV和SPAN元素的手风琴结构的键盘Enter/Spacebar键盘事件

Question

我正在尝试通过添加对键盘控制的支持来使我们的网站上的手风琴访问。我需要让Enter键或Spacebar键触发手风琴的打开/关闭。手风琴由DIV和跨度元素组成。

我试图调整当前的JS代码，该代码可单击我们的手风琴，但无法正常工作。

这是我们网站上一个手风琴元素的HTML的示例：

`婚礼，私人活动和太空租赁

婚礼的标题

婚礼租赁内容

`

这是用于单击事件的JS： $('.accordion .title').click(function() { $(this).parent().children('.content').toggle(); $(this).toggleClass('open'); if ($(this).hasClass('open')){ $(this).parent().attr("aria-expanded","true"); }else { $(this).parent().attr("aria-expanded","false"); } });

下面是我尝试将其重现为Enter密钥上的按键的方法，这是行不通的。什么都没发生。

  `$('.accordion .title').keypress(function(e) {
    if (e.which == 13) {
      $('.accordion .title').click();
    }
  });`

当我更改此代码以将jQuery选择器指向一个单独的手风琴节点(在选择器中使用ID(例如$('＃Trigweddings'((时，代码类型的作品，但在页面上打开所有手风琴节点显然不是我想要的。

我对我在这里实际做的事情感到困惑，我是否正在添加一个活动听众，如果不这样做，我需要这样做？如何触发Enter或Spacebar键的按键的点击事件已经存在的内容？

Answer 1

• $('.accordion .title').click();是一个太常见的选择器，将其限制为$(this).find('.title')，否则您将针对DOM
中的每个.accordion
• 使用RegExp.test()进行Event.which的测试是32或13
• 如果上述测试通过，请不要忘记使用Event.preventDefault()防止浏览器在Spacebar Press上进行funkystufff
• 使用jQuery的.closest()和.find()对您的DOM结构更加灵活，该结构将来可能会更改

$('.accordion .title').click(function() {
  const $acc = $(this).closest('.accordion'); 
  $acc.find('.content').slideToggle();
  $(this).toggleClass('open');
  $acc.attr("aria-expanded", $(this).hasClass('open'));
});
$('.accordion').on('keydown', function(e) {
  if (/^(13|32)$/.test(e.which)) {
    e.preventDefault();
    $(this).find('.title').click();
  }
});

.content {display:none;}

CLICK HERE, than TAB into DIV and hit enter or spacebar
<hr>
<div tabindex=0 class="accordion" aria-expanded="false" aria-controls="sectWeddings" id="trigWeddings">
  <span class="title">Weddings, Private Events, and Space Rental</span>
  <div class="content" role="region" id="sectWeddings" aria-labledby="trigWeddings">
    <h4>Header for Weddings</h4>
    <p>Wedding Rental Content</p>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>