本文介绍如何使用 jquery 实现“点击标题展开对应 `.view-grouping-content` 区块，同时自动收起其他已展开区块”的折叠/展开（accordion）功能，强调结构匹配、dom 遍历逻辑与简洁可靠的事件处理。
在构建产品分类页、FAQ 列表或内容分组模块时，常需实现「单击标题展开对应内容，且仅允许一个区块保持展开」的交互效果。该需求本质是一个典型的 Accordion（手风琴）组件行为。核心在于：精准定位目标内容区块，并确保同一时间仅有一个 .view-grouping-content 可见。
✅ 正确的 DOM 遍历逻辑
观察 HTML 结构可知，每个 .product-header-title 标题都位于 .view-grouping-header 内，而其对应的内容区块 .view-grouping-content 是该 header 的紧邻下一个兄弟元素（即同级 div.view-grouping 下的直接后续子元素）。因此，应使用：
- $(this).parent() → 获取标题的父容器 .view-grouping-header
- .next('.view-grouping-content') → 精准获取其后紧跟的 .view-grouping-content
⚠️ 注意：不能使用 .siblings('.view-grouping-content') 或 .find()，因为内容区块并非标题的子元素或同级任意兄弟，而是特定结构下的下一个兄弟。
✅ 完整可运行代码
@@##@@Football World Cup
Football is a family of team sports...
There are conflicting explanations...
? 关键要点说明
- 无需 $(document).ready() 中手动 .hide()：CSS 已通过 display: none 控制初始状态，更高效、语义清晰。
- .parent() 后建议限定选择器：写成 .parent('.view-grouping-header') 比 .parent() 更健壮，避免因 HTML 结构微调导致意外匹配。
- 事件委托非必需：若 .product-header-title 是静态加载（非动态插入），直接绑定即可；如需支持动态添加，可改用 $('.view-content').on('click', '.product-header-title', ...)。
- 可扩展性提示：如需添加平滑动画，将 .hide() / .show() 替换为 .slideUp() / .slideDown() 即可获得过渡效果。
✅ 总结
该方案以最小侵入性、最大可读性达成目标：结构清晰、逻辑明确、兼容性强。只要 HTML 严格遵循「标题在 .view-grouping-header 内，内容为紧邻下一兄弟 .view-grouping-content」的约定，此代码即可开箱即用，稳定支撑多区块折叠/展开交互。
