使用纯 html、css 和 javascript 实现点击 `
` 标题时动态展开/收起其下方 `
` 段落，支持多组标题-段落结构，页面加载时所有段落默认隐藏。
要实现“点击标题展开对应段落”的交互效果（且不依赖 jQuery），核心思路是：为每组 <h2> 和 <p> 建立关联关系，通过原生 DOM 操作控制段落的显示/隐藏状态。下面提供一个健壮、可复用、语义清晰的完整方案。
✅ 推荐实现方式（推荐使用 data-target + 事件委托）
相比在每个 <h2> 上硬编码 onclick="expand('p1')"，更优雅、可维护的方式是利用 HTML5 自定义属性（如 data-target）和事件委托，避免重复绑定，也无需手动管理 ID。
? HTML 结构（保持语义化，无需修改原有结构）
<div class="maincontent">
<h2 data-target="p1">How HowziTO came to be?</h2>
<p id="p1">
This website was created by me, a South African who moved to Toronto in my mid 20's...
</p>
</div>
<div class="maincontent">
<h2 data-target="p2">What makes HowziTO different?</h2>
<p id="p2">
Unlike generic immigrant guides, HowziTO focuses specifically on South African newcomers...
</p>
</div>
<div class="maincontent">
<h2 data-target="p3">How can I contribute?</h2>
<p id="p3">
We welcome stories, tips, and local insights from fellow South Africans in Canada...
</p>
</div>? CSS：默认隐藏所有 <p>，并添加平滑过渡（可选但推荐）
.maincontent p {
display: none; /* 初始隐藏 */
margin-top: 0.5em;
line-height: 1.6;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease;
}
/* 可选：启用更细腻的展开动画（需配合 JS 设置 max-height）*/
.maincontent p.show {
display: block;
opacity: 1;
}? 提示：仅用 display: none/block 无法实现 CSS 过渡动画（因 display 不可动画）。若需平滑展开效果，建议改用 max-height + overflow: hidden（见文末进阶说明）。
⚙️ JavaScript：简洁、可扩展的逻辑
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
// 为所有 h2 绑定点击事件（使用事件委托，高效且自动适配动态添加的内容）
document.body.addEventListener('click', (e) => {
if (e.target.tagName === 'H2' && e.target.hasAttribute('data-target')) {
const targetId = e.target.getAttribute('data-target');
const targetP = document.getElementById(targetId);
if (!targetP) return;
// 关闭所有已展开的段落（可选：支持单开 or 多开）
document.querySelectorAll('.maincontent p.show').forEach(p => {
p.classList.remove('show');
});
// 切换当前段落状态
targetP.classList.toggle('show');
}
});
});✅ 优势说明：
- ✅ 无需为每个 <h2> 写内联 onclick，HTML 更干净；
- ✅ 支持任意数量的 .maincontent 区块，自动识别；
- ✅ 使用 classList.toggle() 实现「点击展开 → 再次点击收起」；
- ✅ 通过 querySelectorAll(...p.show) 实现「单开模式」（即一次只展开一个段落）；若需「多开模式」，删掉关闭其他段落的那两行即可。
⚠️ 注意事项
- 确保每个 id 在页面中唯一（如 p1, p2, p3），否则 getElementById 行为不可预测；
- <h2> 必须与 <p> 同级且在同一 .maincontent 内（当前逻辑不依赖父子关系，仅靠 id 关联）；
- 若 <p> 内容含 <a> 等可点击元素，建议给 <h2> 添加 cursor: pointer 并确保点击区域明确，避免误操作。
? 进阶：带高度过渡的平滑展开（无 JS 计算高度）
若追求更自然的展开动画，可改用 max-height 方案（需预估最大高度）：
立即学习“Java免费学习笔记（深入）”；
.maincontent p {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease-out, opacity 0.3s ease;
}
.maincontent p.show {
max-height: 500px; /* 设为足够容纳内容的值（单位 px）*/
opacity: 1;
}✅ 优点：纯 CSS 动画，性能好；❌ 缺点：需合理设置 max-height 上限（过小会截断，过大动画迟缓）。对于课程练习，display 切换已完全满足需求。
通过以上结构，你就能轻松实现专业、可维护、无 jQuery 的折叠/展开功能——既符合课程要求，也为后续学习事件委托、CSS 过渡等概念打下坚实基础。
