如何在点击时关闭其他子菜单

<div class="menu">
  <div class="submenu">子菜单1</div>
  <div class="submenu">子菜单2</div>
  <div class="submenu">子菜单3</div>
</div>

// 获取所有子菜单元素
var submenus = document.getElementsByClassName('submenu');

// 给每个子菜单添加点击事件监听器
for (var i = 0; i < submenus.length; i++) {
  submenus[i].addEventListener('click', function() {
    // 遍历所有子菜单元素
    for (var j = 0; j < submenus.length; j++) {
      // 判断当前子菜单是否为被点击的子菜单
      if (submenus[j] === this) {
        // 保持该子菜单的状态为打开
        submenus[j].classList.add('active');
      } else {
        // 关闭其他子菜单
        submenus[j].classList.remove('active');
      }
    }
  });
}

// 在点击其他地方时关闭所有子菜单
document.addEventListener('click', function(event) {
  var target = event.target;
  // 判断点击的目标是否为子菜单或子菜单的父元素
  if (!target.classList.contains('submenu') && !target.classList.contains('menu')) {
    // 关闭所有子菜单
    for (var k = 0; k < submenus.length; k++) {
      submenus[k].classList.remove('active');
    }
  }
});

.submenu {
  display: none;
}

.submenu.active {
  display: block;
}