JavaScript onclick下拉菜单打开新菜单时旧菜单不关闭问题求助

当前代码仅在点击非下拉按钮区域时才会全局关闭已展开菜单，点击其他下拉按钮时不会触发关闭逻辑，因此会出现多个菜单同时展开的问题。我们只需要在单个下拉菜单的触发逻辑中，先关闭所有非当前目标的已展开菜单，再切换当前菜单的显隐状态即可。

<!DOCTYPE HTML>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
    }
    
    .navbar {
      width: 100%;
      padding: 0 10% 0 10%;
      overflow: hidden;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    
    .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      padding: 21.5px 20px;
      background-color: inherit;
      margin: 0;
      cursor: pointer;
      font-weight: bolder;
      color: #2d3436;
    }
    
    .dropdown {
      float: left;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 460px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      height: 450px;
    }
    
    .show {
      display: block
    }
  </style>
</head>
<body>
  <div class="navbar">
    <div class="dropdown">
      <button onclick="toggleDropdown('myDropdown1')" class="dropbtn dropbtn1">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown1" class="dropdown-content dropdown-content1">

      </div>
    </div>

    <div class="dropdown">
      <button onclick="toggleDropdown('myDropdown2')" class="dropbtn dropbtn2">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown2" class="dropdown-content dropdown-content2">

      </div>
    </div>

    <div class="dropdown">
      <button onclick="toggleDropdown('myDropdown3')" class="dropbtn dropbtn3">Dropdown <i class="fas fa-caret-down"></i></button>
      <div id="myDropdown3" class="dropdown-content dropdown-content2">

      </div>
    </div>
  </div>
  <script>
    // 通用下拉切换函数
    function toggleDropdown(targetId) {
      const allDropdowns = document.getElementsByClassName("dropdown-content");
      // 关闭所有非当前目标的已展开菜单
      for (let i = 0; i < allDropdowns.length; i++) {
        const dropdown = allDropdowns[i];
        if (dropdown.id !== targetId && dropdown.classList.contains('show')) {
          dropdown.classList.remove('show');
        }
      }
      // 切换当前菜单显隐
      document.getElementById(targetId).classList.toggle("show");
    }

    // 点击空白区域关闭所有菜单逻辑保留
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
  </script>
</body>
</html>

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