Question

I’m building a mega menu where I want to be able to trigger the menu via both a hover (using the mouse) and focus (such as tabbing to it via the keyboard).

This is what I’m presently doing:

$(".megaMenu-trigger").focus(function (){$(this).hover()});
$(".megaMenu-trigger").hover(function(){
    // do the stuff
});

This works, but am wondering if that’s the ideal way to handle both keyboard and mouse interactions together.

Answer 1

you can use the bind method to bind multiple events to one action i.e.

$('.megaMenu-trigger').bind("mouseenter focus mouseleave", 
        function(event) { console.log(event.type); });