网站多Accordion点击异常修复请求

问题根源 #

你的代码里所有折叠面板的内容块使用了重复的ID，或者JS逻辑用了全局选择器（比如getElementById），导致点击按钮时只会匹配到第一个符合条件的内容块，出现串位问题。

具体修改步骤 #

1. 修正HTML结构：移除重复ID，统一用类标识内容块

把所有折叠内容的重复ID（比如accordion-content）改成类名，同时确保每个按钮和对应内容块是紧邻的兄弟关系：

<!-- 第一个折叠面板 -->
<button class="accordion">Accommodation Rentals</button>
<div class="accordion-content">
  <!-- 住宿租赁内容 -->
</div>

<!-- 第二个折叠面板 -->
<button class="accordion">Electronics Rentals</button>
<div class="accordion-content">
  <!-- 电子设备租赁内容 -->
</div>

2. 修改JS逻辑：绑定按钮与专属内容块

通过this获取当前点击的按钮，再通过nextElementSibling定位到它对应的内容块，避免全局选择器的干扰：

const accButtons = document.querySelectorAll('.accordion');

accButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 切换按钮的激活状态
    this.classList.toggle('active');
    // 获取当前按钮对应的专属内容块
    const panel = this.nextElementSibling;

    // 处理折叠/展开逻辑
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      // 可选：如果需要互斥展开（同时只开一个面板），先关闭所有其他面板
      document.querySelectorAll('.accordion-content').forEach(otherPanel => {
        otherPanel.style.maxHeight = null;
        otherPanel.previousElementSibling.classList.remove('active');
      });
      // 展开当前面板
      panel.style.maxHeight = panel.scrollHeight + 'px';
      this.classList.add('active');
    }
  });
});

3. 确保CSS样式正确

保留折叠内容的基础样式，保证动画效果正常：

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* 其他自定义样式 */
}

关键说明 #

• 用nextElementSibling替代全局ID选择，确保每个按钮只操作自己紧邻的内容块
• 若不需要互斥展开，可删除代码中关闭其他面板的循环部分，实现多面板同时展开

内容的提问来源于stack exchange，提问作者charlespaul abanto