本文介绍如何使用 jquery 实现“点击标题展开对应内容、同时收起其他已展开内容”的折叠面板（accordion）效果，适用于多组 `.view-grouping` 结构，确保每次仅一个 `.view-grouping-content` 可见。
在构建产品分类页、FAQ 列表或内容分组模块时，常需实现「单击标题展开对应详情，且自动关闭其他已展开项」的交互逻辑。本方案基于 jQuery，结构清晰、兼容性强，无需额外插件。
✅ 核心实现思路
- 利用 CSS display: none 隐藏所有 .view-grouping-content（初始状态）；
- 为每个 .product-header-title 绑定点击事件；
- 点击时：先统一隐藏所有 .view-grouping-content，再精准显示当前标题所在分组的下一个兄弟元素（即对应的 .view-grouping-content）；
- 关键 DOM 导航方法：$(this).parent().next(‘.view-grouping-content’) —— 因标题
的父级是 .view-grouping-header，其同级下一个元素正是目标内容区块。
? 完整可运行代码
.view-grouping-content {
display: none;
}
✅ 优化说明：相比原答案中使用的 parent().next()，我们改用 $(this).closest(‘.view-grouping’).find(‘.view-grouping-content’)，更健壮——它不依赖严格的 DOM 顺序（如中间插入其他元素也不失效），语义更明确，推荐在实际项目中采用。
? HTML 结构要求（关键约定）
确保每组内容严格遵循以下嵌套结构：
标题文本
只要结构合规，上述 jQuery 代码即可开箱即用。
