1

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.

Josh Mein
  • 28,107
  • 15
  • 76
  • 87
user1666190
  • 25
  • 6
  • 1
    This implementation will only work when using tab, but not shift+tab. This is because the `focus` event does not bubble, and the element receiving focus will not be `#buttonbar`, but the last link in the menu. To resolve that, also bind the focus event to the links in the menu. `$("#buttonbar, #buttonbar a").focus(...)` – gilly3 Feb 04 '13 at 18:09
  • The other thing you should fix is to set `tabindex=0` (not 1) so that the button bar is tabbed in document order. [Demo](http://jsfiddle.net/3vvSV/4/embedded/result/). By the way, don't let a few downvotes scare you off. Your deleted question was fine. I was in the process of answering and about to upvote when you deleted it. – gilly3 Feb 04 '13 at 18:50
  • Changed tabindex to 0 as recommended. Also I modified the code so it only opens when I tab onto it. ('#buttonbar a') and ("buttonbar a") – user1666190 Feb 04 '13 at 19:47

1 Answers1

0

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

gotohales
  • 3,665
  • 1
  • 20
  • 34
  • It works great unless you tab from somewhere else in the page. I've added the top of the page so say you click in the Search box then tab until you reach the menu. It doesn't drop at that point. Demo: http://jsbin.com/udobuc/10/edit I appreciate all the help so far. – user1666190 Jan 31 '13 at 21:01
  • @user1666190 Yeah, I figured it would need to be tailored a little bit more to fit your scenario exactly, but something in that ballpark should work. Glad it helped :) – gotohales Jan 31 '13 at 21:29