如何用一套代码高效控制多个折叠/展开模块-js教程-PHP中文网

如何用一套代码高效控制多个折叠/展开模块

本文介绍一种基于 css 类选择器和 dom 局部查询的通用方案，只需一段 javascript 即可为任意数量的模块添加平滑的隐藏/显示动画，避免重复代码，同时保持过渡效果与响应逻辑完整。

本文介绍一种基于 css 类选择器和 dom 局部查询的通用方案，只需一段 javascript 即可为任意数量的模块添加平滑的隐藏/显示动画，避免重复代码，同时保持过渡效果与响应逻辑完整。

在构建多模块页面（如课程列表、FAQ 折叠面板、产品特性分组）时，若为每个模块单独编写 ID 绑定逻辑，不仅代码冗余、难以维护，还极易因 ID 冲突或遗漏导致功能失效。真正的优化关键在于结构复用 + 作用域隔离：将交互逻辑从全局 ID 锁定，改为基于模块容器（.module-sub）的局部查找。

✅ 核心思路：以模块为单位，按需查询子元素

不再依赖 document.getElementById() 这类全局唯一查找，而是使用：

document.querySelectorAll('.module-sub') 批量获取所有模块容器；
在每个模块内，通过 mod.querySelector('.module-arrow') 等方法精准定位其内部控件——这样每个模块的箭头、内容区完全独立，互不干扰。

✅ 完整可复用代码示例

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');

    // 初始化：确保折叠状态（可选，增强健壮性）
    if (!container.style.maxHeight) {
      container.style.maxHeight = '0';
    }

    arrow.addEventListener('click', function () {
      if (container.style.maxHeight && container.style.maxHeight !== '0px') {
        // 收起：重置为 0，触发过渡
        container.style.maxHeight = '0';
        arrow.style.transform = 'rotate(0deg)';
      } else {
        // 展开：动态计算内容高度并设置
        container.style.maxHeight = content.scrollHeight + 'px';
        arrow.style.transform = 'rotate(180deg)';
      }
    });
  });
});

✅ 对应 CSS（支持多模块平滑过渡）

.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);
  /* 防止内容溢出影响 height 计算 */
  overflow: hidden;
}

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

✅ HTML 模块结构（可无限复用）

<!-- 模块 1 -->
<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>Formulae</li>
        <li>Pivot Tables</li>
      </ul>
</div>
  </div>
</div>

<!-- 模块 2 -->
<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>Paragraphs</li>
      </ul>
</div>
  </div>
</div>

⚠️ 注意事项与最佳实践

避免 id 属性重复：所有 .module-sub 内部必须使用 class，严禁出现多个相同 id（否则 getElementById 只返回第一个）；
scrollHeight 的可靠性：确保 .mod-content 未被 display: none 或 visibility: hidden 隐藏，否则 scrollHeight 返回 0；推荐始终用 max-height 控制显隐；
性能提示：如模块数量极多（>100），可考虑事件委托（监听 .module-sub 上的冒泡点击），但对常规页面，forEach + addEventListener 更清晰可控；
无障碍增强（可选）：为 .module-arrow 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新，提升屏幕阅读器体验。

这套方案真正实现了「写一次，处处可用」——新增模块只需复制 HTML 结构，无需修改 JS 或 CSS，大幅降低维护成本，是现代前端模块化交互的标准实践。