Как записать события нажатия клавиши ввода / пробела клавиатуры для структуры аккордеона с элементами div и span - PullRequest
Новая
       31

Как записать события нажатия клавиши ввода / пробела клавиатуры для структуры аккордеона с элементами div и span

1 голос
/ 23 мая 2019

Я пытаюсь сделать аккордеоны на нашем сайте доступными, добавив поддержку управления с клавиатуры. Мне нужно, чтобы клавиша ввода или клавиша пробела вызывали открытие / закрытие аккордеонов. Аккордеоны состоят из элементов div и span.

Я пытался адаптировать текущий код js, который работает для клика, с нашими аккордеонами, но не могу заставить его работать.

Вот пример HTML для одного элемента аккордеона на нашем сайте:

` Свадьбы, частные мероприятия и аренда помещений

Заголовок для свадеб

Содержимое свадебного проката

`

Вот js, который работает для события click: $('.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"); } });

Ниже приведено то, что я пытался воспроизвести для нажатия клавиши «Ввод», это не работает. Ничего не произошло. 

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

Когда я изменяю этот код, чтобы указать селектор jquery на один отдельный узел аккордеона (с идентификатором в селекторе, например, $ ('# trigWeddings')), код работает, но открывает все узлы аккордеона на странице. что, очевидно, не то, что я хочу.

Я не совсем понимаю, что я на самом деле здесь делаю, добавляю ли я прослушиватель событий, и если нет, то нужно ли это делать? Как я могу вызвать то, что уже существует для события нажатия для нажатия клавиши Enter или пробела?

1 Ответ

0 голосов
/ 23 мая 2019
  • $('.accordion .title').click(); - слишком распространенный селектор, ограничьте его значением $(this).find('.title'), иначе вы будете нацеливаться на каждый .accordion в DOM
  • тесте, используя RegExp.test() для Event.whichis 32 или 13
  • Если вышеуказанный тест пройден, не забудьте использовать Event.preventDefault(), чтобы браузер не выполнял funkystufff на пробел, нажмите
  • Используйте jQuery's .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>
...