Javascript 可通过键盘使用的下拉式语言键

当鼠标悬停时，我会打开以下下拉列表：

现在，当用户通过tab键高亮显示时，可以打开相同的下拉列表。 我试着从中学习：

但这似乎不起作用

感谢所有能帮忙的人

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>

$(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

---

您可以这样做：

检查元素是否获得焦点，然后通过jQuery显示它

您还可以使用blur来检查元素是否失去焦点并隐藏下拉列表（我在最后一个li元素中添加了last类，您可以通过多种方式进行）

$（文档）.ready（函数（）{
$（“.btn\u选择语言”）.focus（函数（）{
$（“.radius5”）.show（）；
});
$（“.last”）.blur（函数（）{
$（“.radius5”）.hide（）；
});
});// dom结束就绪

我想不是。。但不确定。。！！您可以使用箭头键选择不同的选项。！！我们大部分时间都做得怎么样applications@VeerShrivastav如果我按下向下键，页面就会向下移动。所以我主要是在寻找一种方法，当它突出显示时触发这个悬停动作。

<a href="/jobs?locale=nl" class="last">

$(document).ready(function () {
    $( ".btn_choose_language" ).focus(function() {
      $( ".radius5" ).show();
    });
    $( ".last" ).blur(function() {
      $( ".radius5" ).hide();
    });
});// end of dom ready