I'm currently updating an existing dropdown menu that meets WCAG standards but I need to tweak the functionality so that it activates on hover instead of click. Below is the code snippet:
$(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');
});
});
To see this script in action, you can visit this link: http://jsfiddle.net/58wtuc9x/
I would greatly appreciate any assistance with this task!