单击嵌套子元素时，Javascript 将类添加到下一个元素

Question

我有一个菜单结构，其中隐藏的子菜单不是菜单项的子项。我在主顶级链接中有一个 span 元素，它将作为一个箭头来表示移动设备上的子菜单。当用户触摸 span 元素时，我需要下拉菜单添加一个类(Javascript 不使用 jQuery)以显示它。

类似这样的东西(请注意，这不是我构建菜单的方式，这是网站上已有的代码，我无法更改)

<a href="#">Top Level Menu Item #1
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #2
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #3
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

因此，当触摸或单击 span 时，.dropdown-menu 将添加一个类。

Answer 1

只需使用 span.parentNode.nextElementSibling.classList.toggle('visible');

const spans = document.querySelectorAll('a>span');

for (const span of spans) {
  span.addEventListener('click', (e) => {
    e.stopPropagation();
    span.parentNode.nextElementSibling.classList.toggle('visible');
  })
}

.dropdown-menu {
  opacity: 0;
  transition: all .2s ease-in-out;
}

.dropdown-menu.visible {
  opacity: 1;
}

<a href="#">Top Level Menu Item #1
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #2
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #3
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

请注意，我已将点击监听器限制为 <span>⇩</span> , 链接本身不受影响。

如果您需要兼容 IE11 的代码，请告诉我。