jquery - on.('click') をホバーに変更して、キーボード アクセス可能なドロップダウンを表示します

Question

WCAG に準拠している既存のドロップダウン メニューを変更していますが、クリックではなくホバリングで動作するように機能を変更する必要があります。コードは次のとおりです。

$(document).ready(function() {

  $('.has-submenu').each(function (i, event) {
    var $event = $(event);
    var name = $event.text();
    $event.addClass('open-menu')
      .attr('aria-expanded', 'false')
      .attr('aria-label', 'Open ' + name + ' menu');
  });

  $('.open-menu').on('click', function (event) {
    event.preventDefault();
    var $target = $(event.target);
    if ($target.attr('aria-expanded') == 'true') {
      $target.attr('aria-expanded', 'false');
      return;
    }
    var parentMenus = $target.parentsUntil('.nav-items').filter('ul').prev('a.open-menu');
    $('.nav-items a.open-menu[aria-expanded=true]').not(parentMenus).attr('aria-expanded', 'false');
    $target.attr('aria-expanded', 'true');
  });
});

ここでスクリプトの動作を確認できます: http://jsfiddle.net/58wtuc9x/

どんな助けでも大歓迎です！