如何在单击任何其他父菜单的子菜单或相同的子菜单时关闭多个子菜单

在前端开发中，可以通过以下步骤来实现在单击任何其他父菜单的子菜单或相同的子菜单时关闭多个子菜单：

首先，为每个父菜单添加一个点击事件监听器，以便在点击时触发相应的操作。
当点击某个父菜单时，可以使用DOM操作方法（如querySelector、classList等）获取所有子菜单的元素，可以根据CSS选择器进行选择，或者通过遍历父菜单的子元素来获取子菜单。
对于获取到的子菜单元素，可以使用classList方法来添加或删除指定的CSS类名，用于控制子菜单的显示或隐藏状态。
在点击事件监听器中，可以先判断当前点击的父菜单是否已经处于展开状态，如果是，则将其关闭。可以通过检查父菜单元素的classList中是否包含表示展开状态的CSS类名来进行判断。
在关闭当前父菜单之后，可以使用循环或迭代的方式遍历所有其他父菜单，将它们的子菜单隐藏起来。可以通过遍历父菜单元素的兄弟节点，检查它们的子菜单元素是否处于展开状态，并进行关闭操作。
另外，为了提高用户体验，可以在操作过程中添加一些动画效果，使菜单的展开和关闭更加平滑。

以下是一些示例代码，用于演示如何实现上述功能：

HTML部分：

<div class="parent-menu">
  <button class="parent-menu__button">父菜单</button>
  <ul class="child-menu">
    <li>子菜单1</li>
    <li>子菜单2</li>
    <li>子菜单3</li>
  </ul>
</div>
<!-- 其他类似结构的父菜单和子菜单 -->

CSS部分：

.child-menu {
  display: none;
}

JavaScript部分：

// 获取所有父菜单按钮元素
const parentMenuButtons = document.querySelectorAll('.parent-menu__button');

// 给每个父菜单按钮添加点击事件监听器
parentMenuButtons.forEach(button => {
  button.addEventListener('click', () => {
    const currentParentMenu = button.parentNode;
    const currentChildMenu = currentParentMenu.querySelector('.child-menu');

    if (currentParentMenu.classList.contains('open')) {
      // 关闭当前父菜单
      currentParentMenu.classList.remove('open');
      currentChildMenu.style.display = 'none';
    } else {
      // 关闭其他父菜单并展开当前父菜单
      parentMenuButtons.forEach(otherButton => {
        const otherParentMenu = otherButton.parentNode;
        if (otherParentMenu !== currentParentMenu) {
          otherParentMenu.classList.remove('open');
          otherParentMenu.querySelector('.child-menu').style.display = 'none';
        }
      });
      currentParentMenu.classList.add('open');
      currentChildMenu.style.display = 'block';
    }
  });
});

以上代码中，我们通过给父菜单按钮添加一个CSS类名来表示它的展开状态。当点击父菜单按钮时，通过判断该按钮所在的父菜单元素是否含有该类名来判断它是否已经展开，从而实现展开和关闭的效果。

请注意，上述示例代码只是一种实现方式，具体实现可能因项目需求和技术栈的不同而有所差异。在实际开发中，可以根据具体情况进行调整和优化。