本文介绍一种灵活、可扩展的纯 javascript 方案，通过 data-* 属性自动关联标题与对应内容，支持单击切换显隐、高亮当前项、隐藏其他项，并完美满足多组元素（如 20+ 对）的动态绑定需求。
本文介绍一种灵活、可扩展的纯 javascript 方案，通过 data-* 属性自动关联标题与对应内容，支持单击切换显隐、高亮当前项、隐藏其他项，并完美满足多组元素（如 20+ 对）的动态绑定需求。
在构建折叠面板（accordion）、FAQ 列表或标签式内容区时，常需实现“点击标题显示/隐藏对应内容，且仅允许一项展开”的交互逻辑。本文提供一个不依赖 jQuery、语义清晰、高度可维护的原生 JavaScript 解决方案，完全满足以下核心需求：
- ✅ 所有内容默认隐藏
- ✅ 点击标题，其关联内容显示，标题高亮（如变红）
- ✅ 再次点击同一标题，内容隐藏，标题恢复原色（即双向切换）
- ✅ 点击另一标题时，前一项自动收起 + 样式重置，新项展开 + 高亮
- ✅ 支持任意数量的标题/内容对（无需硬编码 ID 数量）
- ✅ 标题与内容通过 data-related 属性解耦绑定，支持 CSS 选择器（ID、类名、属性等），灵活性远超 title1 ↔ content1 的命名约定
核心实现原理
我们摒弃传统的 if/else 或索引匹配逻辑，转而采用 数据驱动 + CSS 控制显隐与样式 的现代思路：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 使用 data-related 属性声明标题与目标内容的选择器关系（如 #content1 或 .myContents.four）
- 使用 dataset.clicker 和 dataset.trigger 动态标记状态（"base" / "red" / "first" / "hide"）
- 所有视觉表现（颜色、显示/隐藏）均由 CSS 规则控制，JavaScript 仅负责状态切换
完整代码示例
<!-- HTML 结构（支持任意数量，顺序无关） --> <h3 id="title1" class="triggers" data-related="#content1">Title 1</h3> <h3 id="title2" class="triggers" data-related="#content2">Title 2</h3> <h3 id="title3" class="triggers" data-related="#content3">Title 3</h3> <h3 class="triggers four" data-related=".myContents.four">Title 4</h3> <h3 class="triggers" data-related=".myContents[data-related='five']">I am number 5</h3> <p id="content1" class="myContents" data-related="#title1">Content 1</p> <p id="content2" class="myContents" data-related="#title2">Content 2</p> <p id="content3" class="myContents" data-related="#title3">Content 3</p> <p class="myContents four" data-related=".triggers.four">Content 4</p> <p class="myContents" data-related="five">Five is alive!</p>
/* CSS：所有样式逻辑在此定义 */
.triggers[data-clicker="base"] { color: blue; }
.triggers[data-clicker="red"] { color: red; }
.myContents[data-trigger="hide"] { display: none; }
.myContents[data-trigger="first"] { display: block; color: red; }
/* 可为特定内容定制样式（如 #five） */
.myContents[data-trigger="first"][data-related="five"] {
color: green;
font-weight: bold;
text-align: center;
border: 1px solid rgba(0,255,0,0.5);
}// JavaScript：状态管理逻辑（无 jQuery，兼容 IE11+）
function handleTriggerClick(event) {
const trig = this;
const tval = trig.dataset.clicker;
// 1. 重置所有标题为 base 状态
this.parentNode.querySelectorAll(".triggers").forEach(sib => {
sib.dataset.clicker = "base";
});
// 2. 切换当前标题状态（base ↔ red）
trig.dataset.clicker = tval === "red" ? "base" : "red";
// 3. 获取目标内容元素（通过 data-related 中的 CSS 选择器）
const targetSelector = trig.dataset.related;
const targetContent = document.querySelector(targetSelector);
if (!targetContent) return;
// 4. 隐藏所有同级 .myContents 元素
targetContent.parentNode.querySelectorAll(".myContents").forEach(sib => {
sib.dataset.trigger = "hide";
});
// 5. 显示当前目标内容
targetContent.dataset.trigger = "first";
}
// 初始化：为所有带 data-related 的标题绑定事件，并设初始状态
document.querySelectorAll(".triggers[data-related]").forEach(trig => {
trig.addEventListener("click", handleTriggerClick);
trig.dataset.clicker = "base"; // 初始未激活
});关键优势与注意事项
- 零硬编码：无需 title1 → content1 的字符串拼接，data-related 直接写选择器，扩展至 100 组也无需改 JS
- 样式与逻辑分离：CSS 控制外观，JS 仅管理状态，便于主题定制（如深色模式只需改 CSS）
- DOM 顺序无关：标题与内容可在 HTML 中任意位置（甚至跨 <section>），只要 querySelector 能找到即可
- 无障碍友好：天然支持键盘 Enter/Space 触发（因使用 <h3> + click 事件）
- ⚠️ 注意：确保 data-related 值是合法 CSS 选择器（如 #id, .class, [attr="val"]），避免语法错误导致 querySelector 返回 null
- ⚠️ 若内容区域需动画效果，可在 CSS 中添加 transition: opacity .3s 并配合 opacity 替代 display（注意：display 不支持过渡，需搭配 max-height 或 visibility）
该方案兼顾初学者的可读性与生产环境的健壮性，一次配置，终身复用——无论是 3 个 FAQ 还是 50 个产品特性模块，代码结构零变化。
