如何一次只打开一个下拉内容框？

<div class="dropdown">
  <button class="dropdown-btn">下拉按钮</button>
  <div class="dropdown-content">
    <!-- 下拉内容 -->
  </div>
</div>

.dropdown-content {
  display: none; /* 初始状态下隐藏下拉内容 */
}

.dropdown-content.show {
  display: block; /* 显示下拉内容 */
}

var dropdownBtns = document.getElementsByClassName('dropdown-btn');

for (var i = 0; i < dropdownBtns.length; i++) {
  dropdownBtns[i].addEventListener('click', function() {
    var dropdownContent = this.nextElementSibling;
    closeAllDropdowns(); // 关闭其他已打开的下拉内容框
    dropdownContent.classList.toggle('show'); // 切换显示/隐藏下拉内容
  });
}

function closeAllDropdowns() {
  var dropdownContents = document.getElementsByClassName('dropdown-content');
  for (var i = 0; i < dropdownContents.length; i++) {
    dropdownContents[i].classList.remove('show'); // 隐藏所有下拉内容
  }
}