本文介绍如何使用 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()，因为内容区块并非标题的子元素或同级任意兄弟，而是特定结构下的下一个兄弟。
