本文介绍一种基于 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，大幅降低维护成本，是现代前端模块化交互的标准实践。
