使用推送菜单时如何更改焦点？

Question

我正在尝试用推送菜单替换下拉菜单。最初，下拉菜单嵌套在主导航链接旁边。在键盘上使用 Tab 时，它按预期工作。示例：

<li>
  <a href="#" name="#women">WOMEN</a>          <!-- *Main Navigation -->
  <ul id="women">                              <!-- *Submenu         -->
    <li><a href="#">Women</a></li>
    <li><a href="#">Women's Plus</a></li>
    <li><a href="#">Petites</a></li>
  </ul>
</li>

对于推送菜单，HTML 的结构不同。示例：

<ul>                                           <!-- *Main Navigation -->
  <li><a href="#" name="#women">Women</a></li>
  <li><a href="#" name="#accessories">Accessories</a></li>
</ul>

<div>                                          <!-- *Submenus        -->
  <ul id="women">
    <li><a href="#">Women</a></li>
    <li><a href="#">Women's Plus</a></li>
    <li><a href="#">Petites</a></li>
  </ul>

  <ul id="accessories">
    <li><a href="#">Women</a></li>
    <li><a href="#">Men</a></li>
  </ul>

</div>

我遇到的问题是键盘上的 Tab 完全错过了子菜单。我尝试将focus() 与$(ahrefname).find('a').first().focus(); 一起使用，但我必须遗漏一些东西，因为它不起作用。

$(document).ready(function() {
$('.lp-sub-menu ul').each(function () {
    height = $(this).height();
    $(this).transition({
        y: +-+height + 'px'
    });
});

var heights = $('.lp-sub-menu > ul').map(function () {
    return $(this).height();
}).get(),
    maxHeight = Math.max.apply(null, heights);

$('#top').on('click focus', 'a', function (e) {
        "use strict";
        e.preventDefault();

        var ahrefname = this.name,
            eLeft = $(this).offset().left,
            percent = 100 / $(window).width() * eLeft,
            submenuHeight = $(ahrefname).height();

        if ($(ahrefname).siblings().hasClass('active-sub-menu')) {
            $(this).parents('ul').find('a').removeClass('active-menu').find('span').css({
                'visibility': ''
            });
            $(ahrefname).siblings().transition({
                y: +-+maxHeight + 'px'
            }).delay(10).queue(function (next) {
                $(ahrefname).siblings().removeClass('active-sub-menu').css({
                    'margin-left': ''
                });
                next();
            });
            $('.lp-sub-menu').transition({
                height: +submenuHeight + 'px'
            });
            $(ahrefname).css({
                'margin-left': percent + '%'
            }).delay(4).queue(function (next) {
                $(ahrefname).addClass('active-sub-menu').transition({
                    y: +0 + 'px'
                });
                next();
            });
            $(this).addClass('active-menu').find('span').css({
                'visibility': 'visible'
            });
        } else if ($(ahrefname).hasClass('active-sub-menu')) {
            $('.lp-sub-menu').transition({
                height: +-+submenuHeight + 'px'
            });
            $(ahrefname).removeClass('active-sub-menu').transition({
                y: +0 + 'px'
            }).css({
                'margin-left': ''
            });
            $(this).removeClass('active-menu').find('span').css({
                'visibility': ''
            });;
        } else {
            $('.lp-sub-menu').transition({
                height: +submenuHeight + 'px'
            });
            $(ahrefname).find('a').first().focus();

        });
});

我有一个JS Fiddle 正在使用它。任何帮助将不胜感激！

更新：

感谢@hyunkeln！专注于子菜单有效，但下一个菜单项出现问题——当时子菜单没有打开。我将函数更新为以下...

$('.lp-sub-menu ul').each(function(){

    var height = $(this).height(),
        oid = $(this).attr('id');

    $(this).transition({ y: + - + height + 'px' });

    $(this).find('a:last').focusout(function(){
        $( "[name|='#"+oid+"']" ).focus();
    });

});

这会导致子菜单关闭。再次 Tab 并打开下一个子菜单。也许这是件好事？没有把握。这是最新的JS Fiddle。 （我很好奇为什么在 jsFiddle 中分页不能很好地工作？我必须在本地测试才能看到结果。）

Answer 1

为了完成这项工作，我做了几件事，首先你需要移动这条线：

$(ahrefname).find('a').first().focus();

就在这行旁边：

$(ahrefname).css({'margin-left' : percent + '%'}).delay(4).queue(function(next){
  $(ahrefname).addClass('active-sub-menu').transition({ y: + 0 + 'px'});
  next();
  //place it here!!!
});

所以当你调用焦点函数时，对象是可聚焦的。

第二件事是当你模糊当前子菜单的最后一项时，聚焦下一个菜单。我只对您的功能进行了一些更改：

$('.lp-sub-menu ul').each(function(){
height = $(this).height();
$(this).transition({ y: + - + height + 'px' });
    $(this).find("a:last").focusout(function(e){
        var oid = $(this).parent().parent().attr("id");
        $( "[name|='#"+oid+"']" ).parent().next().find("a").focus();

    });
});

这就是我得到的，你可以在这里看到这个：http://jsfiddle.net/wxxb4/6/。