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

休斯敦

我有一个菜单结构，其中隐藏的子菜单不是菜单项的子项。我在主顶级链接中有一个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>

因此，当触摸或单击跨度时，.dropdown菜单将添加一个类。

Connexo

随便去吧 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兼容代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。