我在一个巨型子菜单中有两个UL，我正试图增强它们的可访问性。我希望能够允许用户使用箭头键在同一个容器中的两个单独列表中的前两个项之间移动。

到目前为止，我可以让箭头键在一个列表中的第一项和最后一项之间移动，但不能移动到另一个列表。

    //left and and right arrow navigation functionality

 $('.someclass a').keydown(function(e){
        // Listen for the up, down, left and right arrow keys, otherwise, end here
        if ([37,38,39,40].indexOf(e.keyCode) == -1) {
            return;
        }

        // Store the reference to our top level link
        var link = $(this);
        console.log(link);

        switch(e.keyCode) {
            case 37: // left arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();

                //This is the first item in the top level mega menu list
                if(link.closest('ul').next('ul').prevAll('ul').first().length == 0) {
                    console.log(link.closest('ul'));
                    // Focus on the next first link in the submenu 
                    link.parent('li').nextAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('ul').prevAll('ul').first().find('a').first().focus();
                }
                break;
            case 38: /// up arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.truist-secondary-menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }

                break;
            case 39: // right arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();


                // This is the last item
                if(link.closest('ul').nextAll('li').filter(':visible').first().length == 0) {
                    // Focus on the next first link in the submenu
                    link.parent('li').prevAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('li').nextAll('li').first().find('a').first().focus();
                }
                break;
            case 40: // down arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    // Make sure to stop event bubbling
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }
                break;
        }
    });

html相当长，但这里有一个精简版本，更好地解释了我要做的事情。

    //left and and right arrow navigation functionality

 $('.someclass a').keydown(function(e){
        // Listen for the up, down, left and right arrow keys, otherwise, end here
        if ([37,38,39,40].indexOf(e.keyCode) == -1) {
            return;
        }

        // Store the reference to our top level link
        var link = $(this);
        console.log(link);

        switch(e.keyCode) {
            case 37: // left arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();

                //This is the first item in the top level mega menu list
                if(link.closest('ul').next('ul').prevAll('ul').first().length == 0) {
                    console.log(link.closest('ul'));
                    // Focus on the next first link in the submenu 
                    link.parent('li').nextAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('ul').prevAll('ul').first().find('a').first().focus();
                }
                break;
            case 38: /// up arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.truist-secondary-menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }

                break;
            case 39: // right arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();


                // This is the last item
                if(link.closest('ul').nextAll('li').filter(':visible').first().length == 0) {
                    // Focus on the next first link in the submenu
                    link.parent('li').prevAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('li').nextAll('li').first().find('a').first().focus();
                }
                break;
            case 40: // down arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    // Make sure to stop event bubbling
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }
                break;
        }
    });

顺晟科技：

终于拿到了！需要将。parent（“Li”）更改为。Closest（“UL”）。

    //left and and right arrow navigation functionality

 $('.someclass a').keydown(function(e){
        // Listen for the up, down, left and right arrow keys, otherwise, end here
        if ([37,38,39,40].indexOf(e.keyCode) == -1) {
            return;
        }

        // Store the reference to our top level link
        var link = $(this);
        console.log(link);

        switch(e.keyCode) {
            case 37: // left arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();

                //This is the first item in the top level mega menu list
                if(link.closest('ul').next('ul').prevAll('ul').first().length == 0) {
                    console.log(link.closest('ul'));
                    // Focus on the next first link in the submenu 
                    link.parent('li').nextAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('ul').prevAll('ul').first().find('a').first().focus();
                }
                break;
            case 38: /// up arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.truist-secondary-menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }

                break;
            case 39: // right arrow
                // Make sure to stop event bubbling
                e.preventDefault();
                e.stopPropagation();


                // This is the last item
                if(link.closest('ul').nextAll('li').filter(':visible').first().length == 0) {
                    // Focus on the next first link in the submenu
                    link.parent('li').prevAll('li').last().find('a').first().focus();
                } else {
                    // Focus on the previous first link in the submenu
                    link.parent('li').nextAll('li').first().find('a').first().focus();
                }
                break;
            case 40: // down arrow
                // Find the nested element that acts as the menu
                var dropdown = link.parent('li').find('.menu');

                // If there is a UL available, place focus on the first focusable element within
                if(dropdown.length > 0){
                    // Make sure to stop event bubbling
                    e.preventDefault();
                    e.stopPropagation();

                    dropdown.find('a').filter(':visible').first().focus();
                }
                break;
        }
    });