如何在选中子菜单项时定位对应的submenu-toggle元素

方法一：通过子菜单容器向上定位父级li #

子菜单项的层级为 .submenu > li > .navigation-item，目标submenu-toggle在.submenu的父级li中。可以先找到子菜单容器，再获取其直接父元素：

// 给所有子菜单项绑定点击事件
document.querySelectorAll('.submenu .navigation-item').forEach(item => {
  item.addEventListener('click', function() {
    // 找到当前子菜单项所在的.submenu容器
    const submenuContainer = this.closest('.submenu');
    // 获取.submenu的父元素——外层目标li
    const parentLi = submenuContainer.parentElement;
    // 给该li下的submenu-toggle添加类
    parentLi.querySelector('.submenu-toggle').classList.add('active');
  });
});

方法二：循环遍历祖先元素（兼容所有浏览器） #

如果不想依赖子菜单的类名，可以通过循环向上遍历，直到找到包含submenu-toggle的li：

document.querySelectorAll('.submenu .navigation-item').forEach(item => {
  item.addEventListener('click', function() {
    let currentElement = this.parentElement;
    // 向上遍历，直到找到包含submenu-toggle的li
    while (currentElement && !currentElement.querySelector('.submenu-toggle')) {
      currentElement = currentElement.parentElement;
    }
    // 找到目标后添加类
    if (currentElement) {
      currentElement.querySelector('.submenu-toggle').classList.add('active');
    }
  });
});

方法三：使用:has()选择器（现代浏览器适用） #

如果项目无需兼容旧版浏览器，可直接用原生JS支持的:has()选择器定位目标父级li：

document.querySelectorAll('.submenu .navigation-item').forEach(item => {
  item.addEventListener('click', function() {
    const parentLi = this.closest('li:has(.submenu-toggle)');
    if (parentLi) {
      parentLi.querySelector('.submenu-toggle').classList.add('active');
    }
  });
});

注意事项 #

你的原始HTML中submenu-toggle标签闭合错误，需修正为标准闭合格式，否则会导致DOM结构解析异常：

<ul>  
  <li>
    <a class="navigation-item">Menu Item 1</a>
    <a class="submenu-toggle"></a> <!-- 修正闭合标签 -->
    <ul class="submenu">
      <li>
        <a class="navigation-item">Submenu Item 1</a>
      </li>
    </ul>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者yangsunny