本文详解如何使用原生 javascript 实现“点击时间线标题（.content）动态显示或隐藏对应详情内容（.details_right 或 .details_left）”的交互效果，涵盖 dom 查询、事件绑定、类名切换及 css 隐藏逻辑。
本文详解如何使用原生 javascript 实现“点击时间线标题（.content）动态显示或隐藏对应详情内容（.details_right 或 .details_left）”的交互效果，涵盖 dom 查询、事件绑定、类名切换及 css 隐藏逻辑。
要实现点击 .content 元素后切换其紧邻下一个兄弟元素（即 .Details_right 或 .Details_left）的显示状态，关键在于三点：正确获取目标元素、为每个可点击项单独绑定事件、使用语义清晰的 classList.toggle() 控制显隐。
首先，确保 CSS 中定义了 .hidden 类，并设置 display: none —— 这是控制隐藏的核心样式：
.hidden {
display: none;
}
注意：.Details_right（或 .Details_left）本身无需初始添加 .hidden，是否隐藏由 JS 动态控制；但若希望页面加载时默认隐藏详情，可在 HTML 中直接添加该 class，例如：
<span class="Details_right hidden"> Lorem ipsum dolor sit amet... </span>
其次，在 JavaScript 中，document.querySelectorAll() 返回的是 NodeList（类数组对象），不支持直接调用 .addEventListener()。必须遍历每个匹配元素，为它们分别绑定点击事件：
document.addEventListener("DOMContentLoaded", function() {
const contents = document.querySelectorAll(".content");
contents.forEach(function(content) {
content.addEventListener("click", function() {
// 获取当前 .content 的下一个兄弟元素（即对应的 Details 元素）
const detailsElement = content.nextElementSibling;
// 安全检查：确保存在且为预期类型（可选增强健壮性）
if (detailsElement && (detailsElement.classList.contains("Details_right") ||
detailsElement.classList.contains("Details_left"))) {
detailsElement.classList.toggle("hidden");
}
});
});
});
✅ 优势说明：
- nextElementSibling 精准定位相邻的 ，避免全局查询带来的不确定性；
- classList.toggle("hidden") 自动处理“有则移除、无则添加”，比手动 add/remove 更简洁可靠；
- 使用 forEach 替代错误的 addEventListener 直接调用，彻底解决原始代码中“contents.addEventListener is not a function”报错。
⚠️ 注意事项：
- HTML 结构必须严格保证 .Details_right 或 .Details_left 是 .content 的直接后续兄弟元素（中间不能插入其他元素）；
- 若需支持左右两侧不同布局（如 .left 和 .right 容器），上述 JS 逻辑依然适用，因 nextElementSibling 会自然适配各自结构；
- 如需添加过渡动画，可在 .Details_right 上补充 CSS transition: opacity 0.3s ease, max-height 0.3s ease，并配合 opacity 与 max-height（而非仅 display）实现更平滑效果（注意：display 不支持 CSS 过渡，需改用 visibility + opacity 或 max-height 方案）。
综上，一个轻量、可靠、可扩展的折叠式简历时间线交互就此完成——无需框架，纯原生即可胜任。
