通过键盘提供下拉式语言键

当鼠标悬停时,我会打开以下下拉列表:

现在,当用户通过tab键高亮显示时,可以打开相同的下拉列表。 我试着从中学习: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)

但这似乎行不通。

感谢任何能帮忙的人!

HTML格式:

<div class="choose_language">
    <a class="btn_choose_language" href="#" title="Change language">
        <abbr title="English">EN</abbr>
        <img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
    </a>
    <ul class="radius5" style="overflow: hidden; display: none;">
        <li>
            <a href="/jobs?locale=fr">
                <abbr title="Français">FR</abbr>
            </a>
        </li>
        <li>
            <a href="/jobs?locale=nl">
                <abbr title="Nederlands">NL</abbr>
            </a>
        </li>
    </ul>
</div>

JS文件:

$(document).ready(function () {

    /* =============================================================================
   PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
   ========================================================================== */
    $('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
        e.stopImmediatePropagation();
        //alert($(this).html())
        if(e.target != this) return;
        //hide choose_language box
        $('.choose_language').children('ul').hide();
        //hide every context box except clicked one
        $('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
        //hide more_info box and .my_space box if open
        $('.my_space .more_info_box, .my_space .opened').hide();
        //show/hide THIS context box
        $(this).parent().parent().children('.context_box').fadeToggle(0);
        //set level2 columns at same height
        $(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
        $(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
        //reset the selected item
        $('#nav_item li').removeClass('selected');
        //select the current item
        $(this).parent().parent().addClass('selected');
    });

    /* =============================================================================
    NAV -> highlight clicked element
   ========================================================================== */
    $('header nav#nav-mystib > ul li a h3').click(function() {
        //reset the selected item
        $('#nav-mystib_item li').removeClass('selected');
        //select the current item
        $(this).parent().parent().addClass('selected');
    });


    // Nav -> show/hide language selector
    $('.choose_language').hover(function() {
      if (detectmob()) { return;}
      $('.choose_language ul').slideToggle(200)
    });
    /* open mySpace*/
    $('.my_space .closed').click(function() {
        $('.my_space .opened').show()
        return false;
    });
    /* close mySpace*/
    $('.my_space .opened .btn_close').click(function() {
        $('.my_space .opened').hide();
        return false;
    });

    $('.my_space .info').click(function(e) {
        e.stopImmediatePropagation();
        //hide choose_language box
        $('.choose_language').children('ul').hide();
        //hide every context box
        $('.context_box').hide();
        $('.my_space .more_info_box').fadeToggle(200)
    });


    // Hide context_box, .more_info_box when click outside of it
    $(".context_box, .more_info_box").bind( "clickoutside", function(){
        $(this).hide();
    });
    $(".choose_language").bind( "clickoutside", function(){
      if (detectmob()) { return;}
        $(this).children('ul').hide();
    });


    // Hide context_box, .more_info_box when mouse is outside of it
    $(".context_box, .more_info_box").hover(function(){
        var el=this;
        $(el).stop(true,false)
    },function(){
        var el=this;
        $(el).delay(700).hide(10)
    });

});// end of dom ready