原生JS点击标题展开段落教程

本文介绍了如何仅用原生 HTML、CSS 和 JavaScript 实现点击标题（h2）动态展开或收起对应段落的交互效果，无需依赖 jQuery；方案采用语义化的 data-target 属性关联标题与段落，结合事件委托高效绑定事件，支持多组折叠内容、默认隐藏、单开/多开模式切换，并提供了平滑 CSS 过渡动画的进阶实现技巧——既简洁健壮又便于维护，是掌握 DOM 操作、事件处理与 CSS 动画的实用入门范例。

使用纯 HTML、CSS 和 JavaScript 实现点击 `

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

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

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

和

建立关联关系，通过原生 DOM 操作控制段落的显示/隐藏状态。下面提供一个健壮、可复用、语义清晰的完整方案。

✅ 推荐实现方式（推荐使用 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 并确保点击区域明确，避免误操作。

? 进阶：带高度过渡的平滑展开（无 JS 计算高度）

若追求更自然的展开动画，可改用 max-height 方案（需预估最大高度）：

.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 过渡等概念打下坚实基础。

理论要掌握，实操不能落！以上关于《原生JS点击标题展开段落教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！