本文讲解如何在点击 PHP 动态生成的“Show more”按钮时，精准定位并切换其相邻 的 CSS 类（如从 show-more-retracted 切换为 show-more-expanded），解决因 DOM 查找错误导致的 Cannot read properties of null 报错。

本文讲解如何在点击 php 动态生成的“show more”按钮时，精准定位并切换其相邻 `

` 的 css 类（如从 `show-more-retracted` 切换为 `show-more-expanded`），解决因 dom 查找错误导致的 `cannot read properties of null` 报错。

在 PHP 循环生成 HTML 表格行（如国家人口数据）时，常需为每行添加可展开/折叠的详情区域。你已正确为 设置唯一 id 并传入 JS 函数，但原始代码 document.getElementById(id).classList.toggle(...) 作用于 自身，而非目标

—— 这正是报错 Cannot read properties of null 的根本原因：.nextElementSibling 返回 null（例如后方无兄弟元素、存在文本节点干扰或元素未加载完成）。

要可靠地操作目标

，推荐使用 nextElementSibling + className 安全切换 方案：

function showReligion(id) {
  const trigger = document.getElementById(id);
  if (!trigger) {
    console.warn(`Element with id "${id}" not found.`);
    return;
  }

  const targetDiv = trigger.nextElementSibling;
  if (!targetDiv || !targetDiv.classList) {
    console.warn(`No valid next element or missing classList for id "${id}".`);
    return;
  }

  // 切换类名：retracted ↔ expanded
  if (targetDiv.classList.contains('show-more-retracted')) {
    targetDiv.classList.replace('show-more-retracted', 'show-more-expanded');
  } else if (targetDiv.classList.contains('show-more-expanded')) {
    targetDiv.classList.replace('show-more-expanded', 'show-more-retracted');
  }
}

✅ 优势说明：

• 使用 classList.replace() 比直接赋值 className 更安全，避免意外覆盖其他可能存在的类；
• 增加空值校验，防止控制台报错影响整体脚本执行；
• 兼容现代浏览器（IE10+），无需额外 polyfill。

⚠️ 关键注意事项：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

立即学习“PHP免费学习笔记（深入）”；

• 确保
  是 的紧邻下一个元素节点（非文本节点）。若 PHP 输出中 后有空格或换行，nextElementSibling 可能返回 null —— 此时建议改用 querySelector 或结构优化：

  <!-- 推荐：移除 span 与 div 间的空白 -->
  <span class='show-more' onclick='showReligion(79)' id="79">Show more<i class='material-icons'>add</i></span><div class='show-more-retracted'>...</div>

• 若需支持旧版 IE，可用 targetDiv.className = targetDiv.className === 'show-more-retracted' ? 'show-more-expanded' : 'show-more-retracted'; 替代 classList 方法。

最后，建议将 JS 放置于