Question

I have a jQuery menu (jQuery 1.4.2 and UI 1.8.6) that I need to drop down when you tab into it with the keyboard. It needs to behave the same with the keyboard as it does with the mouse. When you mouse over it, it drops down, then remove the mouse, it slides back up. However, when you tab into it with the keyboard, it doesn’t drop. Here is the code that someone provided to make it drop on keyboard, but I couldn’t make work:

$(document).load(function(){
    $('#buttonbar').attr('tabIndex', 0).on({
        focus: function(){
            $("#buttonbar").triggerHandler("mouseenter");
        },
        blur: function(){
            $("#buttonbar").triggerHandler("mouseleave");
        }
    }); 
});

Live DEMO

Note: the window needs to be 950pixels or wider for it to show.

Answer 1

Something like this should fix it for you.

    $(document).ready(function(){
    $('#buttonbar').focus(function(){
      $("#buttonbar").triggerHandler("mouseenter");
    });

  $("#buttonbar #visitor-links .last-item a").blur(function(){
      $("#buttonbar").triggerHandler("mouseleave");
    }); 

});

Here is the demo: http://jsbin.com/udobuc/8/edit