如何用原生 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 并确保点击区域明确，避免误操作。

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