我们有四个主菜单项（衬衫，裤子，鞋类，头饰），当你点击它时，每个菜单都有一个子导航菜单。例如，当单击衬衫时，会打开一个菜单，其中包含更多选项（ABC品牌到Z品牌）。
主导航类为.mainNav
子导航类是.subNav
当用户在subNav上点击并到达末尾时，我们希望用户被带到下一个mainNav项目。例如，当用户登陆Shirts > Z Brand，然后再次点击tab时，我们希望关闭shirts的subNav，并将用户带到Pants。
如何在subNav中找到最后一个可聚焦的项目，以便当点击标签时，该功能发生？
<div class="mainNav">
<a="#">Shirts</a>
<a="#">Pants</a>
<a="#">Footwear</a>
<a="#">Headgear</a>
</div>
<div class="subNav-0">
<h1>Shirts</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-1">
<h1>Pants</h1>
<a="#">ABC Brand</a>
<a="#">Guess</a>
<a="#">Levis</a>
<a="#">Z Brand</a>
</div>
<div class="subNav-2">
<h1>Headgear</h1>
<a="#">Big Caps</a>
<a="#">Levis</a>
<a="#">Pacific Hatwear</a>
<a="#">Polo</a>
<a="#">Stetson</a>
</div>
<div class="subNav-3">
<h1>Footwear</h1>
<a="#">Adidas</a>
<a="#">Asics</a>
<a="#">Brooks</a>
<a="#">Converse</a>
<a="#">New Balance</a>
<a="#">Nike</a>
<a="#">Puma</a>
<a="#">Saucony</a>
</div>
1条答案
按热度按时间wqsoz72f1#
评论部分已经满了，所以我想在这里发布一些代码。OP中发布的示例代码没有在每个主导航元素之后直接包含每个子导航，因此浏览器无法正确处理Tab键顺序。
如果代码改为这样，会有帮助：
每个子导航都应该有
display:none，直到主导航被选中打开它。当它有display:none时，它不在Tab键顺序中。当它有display:block时，它将被浏览器插入到Tab键顺序中，而无需您做任何事情。还有其他的可访问性注意事项在OP中没有提到，比如每个主导航元素都应该有
aria-expanded，这样屏幕阅读器就会知道它是一个可以打开的折叠部分。