JS新手求教：如何修改手风琴代码实现单次仅展开一行？

嘿，刚接触JavaScript的话，这种手风琴的小bug太常见啦！我来帮你调整代码，实现点击新行自动关闭已展开行的功能～

问题根源 #

原来的代码只是单独切换当前点击行的展开/折叠状态，完全没考虑其他已经处于展开状态的行，所以才会出现多行同时展开的情况。

修改后的完整实现 #

1. JavaScript 代码调整

// 获取所有手风琴头部和对应的内容元素
const accordionHeaders = document.querySelectorAll('.accordion-item-header');
const accordionContents = document.querySelectorAll('.accordion-item-content');

// 给每个头部绑定点击事件
accordionHeaders.forEach((header, index) => {
  header.addEventListener('click', () => {
    const currentContent = accordionContents[index];
    // 记录当前内容是否已经展开
    const isCurrentlyOpen = currentContent.classList.contains('active');
    
    // 第一步：关闭所有已经展开的内容（移除active类）
    accordionContents.forEach(content => {
      content.classList.remove('active');
    });
    
    // 第二步：如果当前内容原本是收起的，就展开它；如果原本是展开的，就保持关闭
    if (!isCurrentlyOpen) {
      currentContent.classList.add('active');
    }
  });
});

2. 配套CSS样式（确保过渡效果正常）

/* 手风琴内容默认收起状态 */
.accordion-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* 可根据需求添加其他样式： padding、border等 */
}

/* 展开状态的样式 */
.accordion-item-content.active {
  max-height: 300px; /* 数值可以根据内容高度调整，或者用fit-content（兼容性稍差） */
}

关键修改点解析 #

• 批量操作元素：先获取所有手风琴的头部和内容，方便统一处理所有行的状态
• 先关后开逻辑：点击任何一行时，先把所有展开的行都收起，再根据当前行的状态决定是否展开
• 支持点击已展开行关闭：通过判断当前行原本的状态，实现点击已展开的行也能关闭它的效果

内容的提问来源于stack exchange，提问作者Pond Smitty