如何在导航栏上切换子菜单项?

Question

我正在一个可访问的导航工作，并希望使用相同的单击处理程序切换子菜单项，但他们最接近各自的子菜单项。(任何辅助功能帮助都是额外的。)设置ID是唯一的方法吗?如果是这样，我希望这在JS中是动态的，其中data-id不是硬编码的。

function handleSubmenuToggle() {
console.log('click');
document.querySelector('.sub-menu-items').style.display = 'block';
}

.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
background: white;
display: none;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-items.show {
display: block !important;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}

<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle();">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle()">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Tools <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>

提前感谢!

https://codepen.io/fawn-marie/pen/GRBobNX?编辑= 1111

Answer 1

W3有一些很好的例子，说明如何使用ARIA属性实现WCAG特性。一个具体的例子可以在这里找到:导航菜单栏示例。

给<button>元素两个新的aria属性

1. aria-haspopup表示有一个弹出子菜单;
2. aria-expanded提供的信息，如果弹出是可见的或不

通过这样做，您可以让<button>控制子菜单的状态。aria-expanded现在会告诉你子菜单的当前状态。您可以通过JavaScript通过Element.setAttribute设置属性值来操作此状态。

然后，您可以根据aria-expanded值对子菜单进行样式化，从而打开和关闭子菜单。因为按钮是子菜单的兄弟，所以当按钮具有特定属性时，可以使用兄弟选择器+来选择子菜单，如下所示。

ul.submenu {
display: none;
}
button[aria-expanded="true"] + ul.submenu {
display: block;
}

很酷的是<button>是唯一的对子菜单的权限。从这里开始，您只需要监听按钮上的点击来切换aria-expanded状态。其余部分将由CSS控制。

我建议你看看W3链接，因为它显示了更多的属性，你应该在这种结构中使用，以提高可访问性。

const subMenuToggles = document.querySelectorAll('.sub-menu-toggle');
document.addEventListener('click', event => {
const subMenuToggle = event.target.closest('.sub-menu-toggle');
if (subMenuToggle === null) {
return;
}

for (const toggle of subMenuToggles) {
if (toggle.hasAttribute('aria-haspopup')) {
toggle.setAttribute('aria-expanded', 'false');
}
}

if (!subMenuToggle.hasAttribute('aria-haspopup')) {
return;
}

if (subMenuToggle.getAttribute('aria-expanded') === 'true') {
subMenuToggle.setAttribute('aria-expanded', 'false');
} else {
subMenuToggle.setAttribute('aria-expanded', 'true');
}
});

.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
display: none;
background: white;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-toggle[aria-expanded="true"] + .sub-menu-items {
display: block;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}

<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Tools <i class="fa-solid fa-chevron-down"></i></button>

<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>

<ul class="sub-menu-items">
<li>
<a href="#">Sub Menu Item</a>
</li>
<li>
<a href="#">Sub Menu Item 2</a>
</li>
<li>
<a href="#">Sub Menu Item 3</a>
</li>
<li>
<a href="#">Sub Menu Item 4</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>