下拉菜单点击展开点击其他地方关闭

<style>
  /* 下拉菜单按钮样式 */
  .dropbtn {
    background-color: #ffffff;
    color: #333333;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  /* 下拉菜单容器样式（隐藏） */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  /* 下拉菜单链接样式 */
  .dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
  }

  /* 鼠标悬停时的样式（背景色变白） */
  .dropdown-content a:hover {
    background-color: #f1f1f1;
  }

  /* 显示下拉菜单的样式 */
  .show {
    display: block;
  }
</style>
<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#1">链接1</a>
    <a href="#2">链接2</a>
    <a href="#3">链接3</a>
  </div>
</div>
<script>
  // 获取下拉菜单按钮和下拉菜单容器
  var dropdownBtn = document.getElementsByClassName("dropbtn")[0];
  var dropdownContent = document.getElementsByClassName("dropdown-content")[0];

  // 单击下拉菜单按钮显示或关闭下拉菜单
  dropdownBtn.onclick = function () {
    dropdownContent.classList.toggle("show");
  }

  // 单击非下拉菜单区域关闭下拉菜单
  window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for (var i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
</script>