当前位置：首页 > 文章列表 > 文章 > 前端 > 原生JS点击标题展开段落教程

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

2026-02-26 21:19:00 0浏览收藏

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

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

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

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

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

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

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

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

相比在每个

上硬编码 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：默认隐藏所有
，并添加平滑过渡（可选但推荐）

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