如何将子菜单模态框最后项焦点移至下一个主导航元素

针对你的需求，修改后的jQuery代码如下，同时修正了原代码中的选择器错误，并实现了精准的焦点跳转逻辑：

// 处理SubMenu 1.8的Tab跳转：跳转到Main Nav 2
$('#subMenu-wrapper:first-of-type a:last-child').on('keydown', function(e) {
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    hideModalOverlay();
    $('.main-navigation li:nth-of-type(2) a').focus();
  }
});

// 处理SubMenu 2.9的Tab跳转：跳转到Main Nav 3
$('#subMenu-wrapper:nth-of-type(2) a:last-child').on('keydown', function(e) {
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    hideModalOverlay();
    $('.main-navigation li:nth-of-type(3) a').focus();
  }
});

// 处理Contact us按钮的Tab跳转：保留默认行为到More info，仅隐藏模态框
$('#subMenu-wrapper:nth-of-type(3) btn').on('keydown', function(e) {
  if (e.key === 'Tab' && !e.shiftKey) {
    hideModalOverlay();
  }
});

关键说明 #

1. 选择器修正：原代码错误使用了类选择器.subMenu-wrapper和不存在的.subMenu-container，改为通过:first-of-type/:nth-of-type定位子菜单容器，匹配HTML结构中的实际元素。
2. 焦点跳转逻辑：
   • 前两个子菜单的最后一项，触发正向Tab时阻止默认行为，手动聚焦到对应的下一个主导航元素，同时隐藏模态框。
   • 第三个子菜单的「Contact us」按钮，仅在Tab时隐藏模态框，不阻止默认Tab行为，让焦点自然跳转到页面的「More info」链接。
3. 事件绑定优化：用on代替one，确保模态框多次打开时，事件能重复触发。
4. 现代按键检测：使用e.key === 'Tab'替代旧的keyCode，兼容性更好且语义更清晰。

内容的提问来源于stack exchange，提问作者linnse