javascript - 可通过键盘使用的下拉语言键

Question

当鼠标悬停时，我有以下下拉菜单：

现在，当用户通过 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

Answer 1

你可以这样做：

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

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

<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