如何用最少代码实现多个模块的折叠/展开功能-js教程-PHP中文网

如何用最少代码实现多个模块的折叠/展开功能

本文介绍一种可复用、无重复的 javascript 方案，通过类选择器 + 作用域限定查询，让同一段逻辑控制任意数量的折叠模块，避免 id 冲突与代码冗余，同时保留平滑 css 动画效果。

本文介绍一种可复用、无重复的 javascript 方案，通过类选择器 + 作用域限定查询，让同一段逻辑控制任意数量的折叠模块，避免 id 冲突与代码冗余，同时保留平滑 css 动画效果。

要为页面中多个结构相同的模块（如课程列表、FAQ 条目等）统一实现「点击箭头展开/收起内容」功能，关键在于放弃全局唯一 ID，改用语义化类名 + 局部作用域查询。原始代码使用 getElementById 仅能绑定单个元素，而真实场景中每个模块都是独立副本，必须确保事件处理逻辑在各自模块内部闭环运行。

✅ 正确做法：基于模块容器的作用域化操作

我们以 .module-sub 作为每个模块的根容器，使用 querySelectorAll('.module-sub') 获取全部模块，再对每个模块调用 forEach，并在其内部通过 mod.querySelector(...) 精准定位子元素——这样既复用了同一套逻辑，又完全隔离了各模块的状态与样式。

以下是完整可运行的优化方案：

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.module-sub').forEach((mod) => {
    const arrow = mod.querySelector('.module-arrow');
    const container = mod.querySelector('.mod-content-container');
    const content = mod.querySelector('.mod-content');

    arrow.addEventListener('click', function () {
      if (container.style.maxHeight) {
        // 收起：清空 maxHeight 触发过渡回零
        container.style.maxHeight = null;
        arrow.style.transform = 'rotate(0deg)';
      } else {
        // 展开：设为内容实际高度（含 padding/border）
        container.style.maxHeight = content.scrollHeight + 'px';
        arrow.style.transform = 'rotate(180deg)';
      }
    });
  });
});

配套 CSS（注意：max-height 动画需明确初始值与目标值，且不可用 auto）：

.mod-content-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.mod-content {
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 确保内容不被截断（如 ul/li 默认 margin 可能影响 scrollHeight） */
}

.module-arrow {
  cursor: pointer;
  font-size: 24px;
  transition: transform 0.3s ease-out;
}

HTML 结构（支持无限添加同类模块，无需修改 JS）：

<div class="module-sub container">
  <div class="d-flex justify-content-between">
    <div class="module-heading">EXCEL</div>
    <div class="module-arrow">▼</div>
  </div>
  <div class="mod-content-container">
    <div class="mod-content">
      <ul>
<li>Excel Basics</li>
        <li>Excel Essentials</li>
        <li>Formulae</li>
        <li>Data Analysis</li>
        <li>Charts</li>
        <li>Pivot Tables</li>
        <li>Lookup</li>
      </ul>
</div>
  </div>
</div>

<div class="module-sub container">
  <div class="d-flex justify-content-between">
    <div class="module-heading">WORD</div>
    <div class="module-arrow">▼</div>
  </div>
  <div class="mod-content-container">
    <div class="mod-content">
      <ul>
<li>Word Basics</li>
        <li>Word Essentials</li>
        <li>Paragraphs</li>
        <li>Pages</li>
      </ul>
</div>
  </div>
</div>

⚠️ 注意事项与进阶建议

scrollHeight 的可靠性：该属性包含 padding 和内容高度，但不含 border/margin。若 .mod-content 有额外边框或外边距，建议统一用 box-sizing: border-box 并在 .mod-content-container 上预留空间，或改用 getBoundingClientRect() 计算更精确高度。
动画兼容性：max-height 过渡无法从 0 到 auto，因此必须用 scrollHeight 动态计算；若内容高度变化频繁（如响应式或动态加载），可在切换前强制重排（container.offsetHeight）以确保获取最新尺寸。
无障碍增强（可选）：为 .module-arrow 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新，提升屏幕阅读器体验。
性能优化：若模块数量极多（>100），可考虑事件委托（监听 .module-sub 上的冒泡 click），但需额外判断触发源是否为 .module-arrow，权衡可读性与性能。

这套方案真正做到了「写一次，用多次」：新增模块只需复制 HTML 结构，无需触碰 JS 或 CSS，大幅降低维护成本，是构建可扩展前端组件的典型实践。