如何用原生 JavaScript 实现点击标题展开对应段落（无 jQuery）

使用纯 html、css 和 javascript 实现点击 `

` 标题时动态展开/收起其下方 `

` 段落，支持多组标题-段落结构，页面加载时所有段落默认隐藏。

要实现“点击标题展开对应段落”的交互效果（且不依赖 jQuery），核心思路是：为每组

和

✅ 推荐实现方式（推荐使用 data-target + 事件委托）

相比在每个

上硬编码 onclick="expand('p1')"，更优雅、可维护的方式是利用 HTML5 自定义属性（如 data-target）和事件委托，避免重复绑定，也无需手动管理 ID。

? HTML 结构（保持语义化，无需修改原有结构）

  
How HowziTO came to be?
  

    This website was created by me, a South African who moved to Toronto in my mid 20's...
  



  
What makes HowziTO different?
  

    Unlike generic immigrant guides, HowziTO focuses specifically on South African newcomers...
  



  
How can I contribute?
  

    We welcome stories, tips, and local insights from fellow South Africans in Canada...
  

? CSS：默认隐藏所有

，并添加平滑过渡（可选但推荐）

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

✅ 优势说明：

• ✅ 无需为每个

  写内联 onclick，HTML 更干净；

• ✅ 支持任意数量的 .maincontent 区块，自动识别；
• ✅ 使用 classList.toggle() 实现「点击展开 → 再次点击收起」；
• ✅ 通过 querySelectorAll(...p.show) 实现「单开模式」（即一次只展开一个段落）；若需「多开模式」，删掉关闭其他段落的那两行即可。

⚠️ 注意事项

• 确保每个 id 在页面中唯一（如 p1, p2, p3），否则 getElementById 行为不可预测；

• 必须与

  同级且在同一 .maincontent 内（当前逻辑不依赖父子关系，仅靠 id 关联）；

• 若

  内容含 等可点击元素，建议给

  添加 cursor: pointer 并确保点击区域明确，避免误操作。

  

  ReRoom AI

  专为室内设计打造的AI渲染工具，可以将模型图、平面图、草图、照片转换为高质量设计效果图。

  下载

? 进阶：带高度过渡的平滑展开（无 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 过渡等概念打下坚实基础。