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中，它是由deafult聚焦的，它不适用于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了解您正在尝试完成的内容）：

元素的Tab键顺序。 Tab键顺序是其中的顺序当用户按下＆＃34;标签时，移动焦点。键。元素与更高的tabindex稍后会出现在标签序列中。

MDN also has an article on focus management

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

1 个答案: