本文介绍一种可复用、无重复的 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，大幅降低维护成本，是构建可扩展前端组件的典型实践。
