在下面的代碼中,我如何將焦點從子菜單模式的最后一項移動到下一個主導航元素。
例如...
當用戶關閉& quot子菜單1.8",焦點需要轉到& quot主導航2 & quot。 當用戶關閉& quot子菜單2.9",焦點需要轉到& quot主導航3 & quot。 當用戶關閉& quot更多信息& quot順便說一句,焦點然后可以恢復到頁面的& quot更多信息& quot鏈接。 這是我為HTML和jQuery準備的。我可以修改jQuery,但是不能改變HTML的結構。
<nav class="main-navigation" role="none">
<ul>
<li role="group" class="active-main-menu"><a class="att-track active" role="menuitem" aria-haspopup="true" aria-expanded="true">Main Nav 1</a>
</li>
<li role="group"><a role="menuitem" aria-haspopup="true" aria-expanded="false">Main Nav 2</a>
</li>
<li role="group"><a role="menuitem" aria-haspopup="true" aria-expanded="false">Main Nav 3</a>
</li>
</ul>
</nav>
<!-- subMenu Modal -->
<div id="subMenu-wrapper active">
<h4><a href="#">SubMenu Title 1.0</a></h4>
<a href="#">SubMenu 1.1</a>
<a href="#">SubMenu 1.2</a>
<a href="#">SubMenu 1.3</a>
<a href="#">SubMenu 1.4</a>
<a href="#">SubMenu 1.5</a>
<a href="#">SubMenu 1.6</a>
<a href="#">SubMenu 1.7</a>
<a href="#">SubMenu 1.8</a>
</div>
<div id="subMenu-wrapper">
<h4><a href="#">SubMenu Title 2.0</a></h4>
<a href="#">SubMenu 2.1</a>
<a href="#">SubMenu 2.2</a>
<a href="#">SubMenu 2.3</a>
<a href="#">SubMenu 2.4</a>
<h4><a href="#">SubMenu Title 2.1</a></h4>
<a href="#">SubMenu 2.5</a>
<a href="#">SubMenu 2.6</a>
<a href="#">SubMenu 2.7</a>
<a href="#">SubMenu 2.8</a>
<a href="#">SubMenu 2.9</a>
</div>
<div id="subMenu-wrapper">
<h4><a href="#">SubMenu Title 3.0</a></h4>
<a href="#">SubMenu 3.1</a>
<a href="#">SubMenu 3.2</a>
<a href="#">SubMenu 3.3</a>
<a href="#">SubMenu 3.4</a>
<a href="#">SubMenu 3.5</a>
<btn>Contact us</btn>
</div>
<div class="main-content">
<a href="#">More info</a>
</div>
$('.subMenu-wrapper:first-child a:last, .subMenu-container:nth-child(2) a:last, .subMenu-container:nth-child(3) a:last').one("keydown", function (e) {
if (e.keyCode === 9) {
$('active-main-menu').focus();
hideModalOverlay(); // hides modal
}
});
# # #你提到你不能改變html,但是這里最簡單的是簡單地給需要的元素添加id,然后當它關閉時重新聚焦,但是你提到你不能改變html。