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

<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>
<!-- 其他类似结构的父菜单和子菜单 -->

.child-menu {
  display: none;
}

// 获取所有父菜单按钮元素
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';
    }
  });
});