This snippet adds keyboard navigation support to a multi-level website menu. It automatically opens submenus when a user tabs into them and closes them when focus moves to a different top-level link.
const liParent = $("li.menu-item-has-children");
const liParentLink = liParent.find('a')
liParentLink.on( 'keypress focusin' , function() {
const ulParent = $(this).parents('ul.active')
$('.active').not(ulParent).removeClass('active')
$(this).find('+ ul').addClass('active')
})
$('li.menu-item:not(li.menu-item-has-children):not(ul.sub-menu li)').on('focusin keypress', function() {
$('.active').removeClass('active')
})
