如何使用纯javascript显示和隐藏多个下拉菜单并通过单击外部来关闭

<div class="dropdown">
  <button class="dropdown-toggle">菜单1</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

<div class="dropdown">
  <button class="dropdown-toggle">菜单2</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

<div id="overlay"></div>

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

// 获取所有下拉菜单和遮罩层
const dropdowns = document.querySelectorAll('.dropdown');
const overlay = document.getElementById('overlay');

// 监听按钮的点击事件
dropdowns.forEach((dropdown) => {
  const toggleButton = dropdown.querySelector('.dropdown-toggle');
  const menu = dropdown.querySelector('.dropdown-menu');

  toggleButton.addEventListener('click', () => {
    if (menu.style.display === 'none') {
      // 显示下拉菜单
      menu.style.display = 'block';
      overlay.style.display = 'block';
    } else {
      // 隐藏下拉菜单
      menu.style.display = 'none';
      overlay.style.display = 'none';
    }
  });
});

// 单击遮罩层关闭下拉菜单
overlay.addEventListener('click', () => {
  dropdowns.forEach((dropdown) => {
    const menu = dropdown.querySelector('.dropdown-menu');
    menu.style.display = 'none';
  });
  overlay.style.display = 'none';
});