JavaScript手风琴组件：为何在小屏幕下出现挤压问题？

我明白你的痛点——不想为了一个手风琴引入臃肿的UI库，但现有代码在小屏幕上出了问题。咱们一步步来修复它：

问题根源 #

你遇到的遮挡问题，本质是当窗口缩小时，答案内容换行导致实际高度超过了之前计算的scrollHeight，但代码没有在窗口尺寸变化时重新更新面板的maxHeight，加上可能CSS布局没做响应式适配，才会出现内容被下一个手风琴项遮挡的情况。

完整解决方案 #

下面是调整后的代码，包含响应式CSS和优化的JS逻辑，完美适配所有屏幕尺寸：

1. 基础CSS（关键是响应式布局和过渡效果）

#accordion {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#accordion li {
  width: 100%;
  box-sizing: border-box; /* 确保padding不会撑宽元素，避免挤压 */
}

.accordion {
  background-color: #f1f1f1;
  padding: 18px;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}

.accordion.activeAccordion {
  background-color: #e0e0e0;
}

.panel {
  padding: 0 18px;
  background-color: #fff;
  max-height: 0;
  overflow: hidden; /* 隐藏超出部分 */
  transition: max-height 0.3s ease-out; /* 平滑展开/收起动画 */
  border-bottom: 1px solid #eee;
}

.panel p {
  padding: 18px 0;
  margin: 0;
  line-height: 1.6; /* 优化小屏幕阅读体验 */
}

2. 优化后的JavaScript（添加窗口 resize 监听）

// 用原生JS替代jQuery的类添加逻辑（避免额外依赖）
document.querySelectorAll('#accordion li:nth-child(odd)').forEach(item => {
  item.classList.add('accordion');
});
document.querySelectorAll('#accordion li:nth-child(even)').forEach(item => {
  item.classList.add('panel');
});

// 手风琴核心交互逻辑
const accordionTriggers = document.querySelectorAll('.accordion');
accordionTriggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    this.classList.toggle('activeAccordion');
    const panel = this.nextElementSibling;
    
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      // 计算当前面板的实际内容高度
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
});

// 监听窗口尺寸变化，更新已展开面板的高度
window.addEventListener('resize', () => {
  document.querySelectorAll('.panel').forEach(panel => {
    // 只更新处于展开状态的面板
    if (panel.previousElementSibling.classList.contains('activeAccordion')) {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
});

为什么这样修改？ #

• CSS部分：用box-sizing: border-box确保元素宽度不会因为padding超出容器，彻底解决挤压问题；添加过渡动画让交互更流畅；优化小屏幕下的行高提升可读性。
• JS部分：移除了jQuery依赖（如果你项目里必须用jQuery，也可以把类添加逻辑改回jQuery写法）；关键是新增了resize事件监听，每次窗口尺寸变化时，重新计算所有展开面板的实际高度，确保内容不会被遮挡。

如果你坚持保留jQuery，那resize部分可以改成：

$(window).resize(function() {
  $('.activeAccordion + .panel').each(function() {
    $(this).css('maxHeight', $(this)[0].scrollHeight + 'px');
  });
});

这样调整后，你的手风琴就能在所有屏幕尺寸下和jQuery UI的效果一样流畅啦！

内容的提问来源于stack exchange，提问作者J Doe