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

要实现一次只打开一个下拉内容框，可以使用JavaScript和CSS来实现。以下是一种常见的实现方式：

HTML结构：

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

CSS样式：

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

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

JavaScript代码：

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'); // 隐藏所有下拉内容
  }
}

这段代码会为每个下拉按钮添加点击事件监听器。当点击按钮时，它会找到对应的下拉内容框，并切换其显示/隐藏状态。同时，它会调用closeAllDropdowns函数来关闭其他已打开的下拉内容框，确保一次只有一个下拉内容框是打开的。

这种实现方式可以适用于多个下拉内容框的情况，每个下拉按钮和下拉内容框的结构可以根据实际需求进行调整。