如何使用 div 和 span 元素捕获手风琴结构的键盘 enter/spacebar keydown 事件

Question

我正在尝试通过添加对键盘控制的支持来使我们站点上的手风琴易于访问。我需要让回车键或空格键触发手风琴的 opening/closing 。手风琴由 div 和 span 元素组成。

我已经尝试调整当前的 js 代码，该代码适用于我们的手风琴点击但无法正常工作。

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

` 婚礼、私人活动和 Space 租赁

Header 用于婚礼

婚礼租赁内容

`

点击事件的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 选择器指向 dividual 手风琴节点中的一个（在选择器中有一个 id，如 $('#trigWeddings')），代码种类的作品，但打开了页面上的所有手风琴节点，这显然不是我想要的。

我对我在这里实际做的事情感到困惑，我是否添加了一个事件侦听器，如果没有，我是否需要这样做？如何触发 Enter 或 Spacebar 键的点击事件已经存在的事件？

Answer 1

$('.accordion .title').click(); 是一个太常见的选择器，将其限制为 $(this).find('.title') 否则你将针对 DOM

.accordion

使用 RegExp.test() 测试 Event.which 是 32 或 13
如果以上测试通过，请不要忘记使用 Event.preventDefault() 来防止浏览器在按空格键时做 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>

如何使用 div 和 span 元素捕获手风琴结构的键盘 enter/spacebar keydown 事件

How do I capture the keyboard enter/spacebar keydown events for an accordion structure with div and span elements

jquery

addeventlistener

keyboard-events