jquery - 如何通过jquery按Tab键迭代菜单的每个子菜单项？

Question

代码如下:

    <ul class="main-nav">
                        <li class="item-1">
                            <a href="#" class="menu">Engines</a>
                            <div class="arrow-down"></div>
                            <ul class="full-sub sub-menu">
                                <li class="col-1">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">New</a></li>
                                      <li class="sub-head"><a href="#">Personalized Train and Book</a></li>
                                      <li class="sub-head"><a href="#">Diesel</a></li>
                                      <li class="sub-head"><a href="#">Steamies</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                   </ul>
                                </li>
                                <li class="col-2">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Train Engines</a></li>
                                      <li><a href="#" id="abdur">Sub Category Name1</a></li>
                                      <li><a href="#">Sub Category Name2</a></li>
                                      <li><a href="#">Sub Category Name3</a></li>
                                      <li><a href="#">Sub Category Name4</a></li>
                                      <li><a href="#">Sub Category Name5</a></li>
                                      <li><a href="#">Sub Category Name6</a></li>
                                      <li class="sub-head"><a href="#">Rail Cars</a></li> 
                                   </ul>
                                </li>
                                <li class="col-3">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Other Vehicles</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li class="sub-head"><a href="#">Sir Topham Hatt</a></li>
                                   </ul>
                                </li>
                                <li class="col-4">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Basic Engines</a></li>
                                      <li class="sub-head"><a href="#">Talkin Engines</a></li>
                                      <li class="sub-head"><a href="#">Roll and White Engines</a></li>
                                      <li class="sub-head"><a href="#">Battery Operated</a></li>
                                      <li class="sub-head"><a href="#">Multi-Packs</a></li>
                                   </ul>
                                </li>
                             </ul>
                        </li>
</ul>

我想通过按 Tab 来聚焦子菜单的每个元素。在 chrome 中，它由默认 bt 聚焦，它在 firefox 和 Ie 中不起作用。我写了以下代码。请提供一些解决方案。

$('.main-nav > li').bind('focusin', openSubMenu);
    $('.main-nav > li').bind('focusout', closeSubMenu);

    function openSubMenu() {
        $(this).find('.arrow-down').css('display', 'block').addClass("display-check");
        $(this).find('ul.full-sub').css('display', 'block').addClass("display-check");
    }
    ;

    function closeSubMenu() {
        $(this).find('.arrow-down').css('display', 'none');
        $(this).find('ul.full-sub').css('display', 'none');
    }
    function closeSubMenu() {
            if($('.arrow-down').hasClass('display-check'))
                {
                $('.arrow-down').css('display', 'none');
                $('ul.full-sub').css('display', 'none');
                }
    }

Answer 1

您不需要求助于 jQuery，只需在底层 HTML 中定义元素的 tabindex 属性即可。

tabindex="1"

有关此的更多信息，请参见 here , 和 here on MDN (更多信息 here 关于你想要完成的事情):

The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.

MDN also has an article on focus management