JavaScript手风琴组件：实现单面板展开模式

const accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
  accordians[i].onclick = function() {
    this.classList.toggle('arrowClass'); // 切换箭头样式
    var content = this.nextElementSibling; // 获取相邻的内容面板

    if (content.style.maxHeight) {
      // 面板已打开，需要关闭
      content.style.maxHeight = null;
    } else {
      // 面板已关闭，需要打开
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

// 获取所有手风琴按钮，以便后续遍历
let allAccordionButtons = document.querySelectorAll('.accordion_btn');

// 在共同的父元素 'main' 上添加事件监听器，利用事件委托
document.querySelector('main').addEventListener('click', e => {
  // 检查点击事件的触发目标是否为手风琴按钮
  if (e.target.classList.contains('accordion_btn')) {

    // 遍历所有手风琴按钮
    allAccordionButtons.forEach(button => {
      // 如果当前遍历的按钮不是被点击的按钮
      if (button !== e.target) {
        // 关闭该按钮对应的内容面板
        button.nextElementSibling.style.maxHeight = null;
        // 移除其箭头样式类，使其恢复到折叠状态的视觉表现
        button.classList.remove('arrowClass');
      }
    });

    // 处理当前被点击手风琴的展开/折叠逻辑
    let content = e.target.nextElementSibling; // 获取当前按钮的下一个兄弟元素（内容面板）

    // 判断当前内容面板是否已完全展开，如果是则关闭，否则展开
    // parseFloat(content.style.maxHeight) === parseFloat(content.scrollHeight)
    // 这种判断方式可以准确检测面板是否已完全展开，避免因浮点数精度问题导致的错误
    if (parseFloat(content.style.maxHeight) === parseFloat(content.scrollHeight)) {
        content.style.maxHeight = null; // 关闭面板
    } else {
        content.style.maxHeight = content.scrollHeight + "px"; // 展开面板至其完整高度
    }

    // 切换当前按钮的箭头样式，指示其展开/折叠状态
    e.target.classList.toggle('arrowClass');
  }
});

<main>
  <div class="accordion_container">
    <!-- ... 其他内容 ... -->
    <div class="accordion_body">
      <div class="accordion_body_item">
        <button class="accordion_btn">Inbox one</button>
        <div class="accordion_content">
          <div class="inner">
            <div class="inner_datetime">dd/mm/yyyy</div>
            <div class="inner_body">
              <!-- 面板内容 -->
            </div>
          </div>
        </div>
      </div>
      <!-- ... 更多 accordion_body_item ... -->
    </div>
    <!-- ... 其他内容 ... -->
  </div>
</main>

/* 关键的折叠动画样式 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_content {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #777;
  border-right-width: 3px;
  border-right-style: solid;
  border-right-color: #777;
  max-height: 0; /* 初始状态，内容隐藏 */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: max-height 450ms ease-in-out; /* 为max-height变化添加过渡动画 */
}

/* 解决按钮hover时边框抖动问题 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn {
  width: 100%;
  background-color: gainsboro;
  border: none;
  border-left: 3px solid transparent; /* 默认添加透明边框，预留空间 */
  border-right: 3px solid transparent; /* 默认添加透明边框，预留空间 */
  outline: none;
  text-align: left;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 300ms linear; /* 背景色过渡 */
}

main div.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
  background-color: silver;
  border-left-color: rgba(19, 2, 153, 1); /* hover时改变边框颜色 */
  border-right-color: rgba(19, 2, 153, 1);
  color: rgba(19, 2, 153, 1);
}

/* 箭头图标的切换 */
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
  content: '▼'; /* 默认向下箭头 */
  float: right;
}

main div.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
  content: '▲'; /* 展开时向上箭头 */
}