本文介绍如何使用 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，其同级下一个元素正是目标内容区块。

? 完整可运行代码

✅ 优化说明：相比原答案中使用的 parent().next()，我们改用 $(this).closest(‘.view-grouping’).find(‘.view-grouping-content’)，更健壮——它不依赖严格的 DOM 顺序（如中间插入其他元素也不失效），语义更明确，推荐在实际项目中采用。

? html 结构要求（关键约定）

确保每组内容严格遵循以下嵌套结构：

   
     
标题文本
   
   
        
 

只要结构合规，上述 jQuery 代码即可开箱即用。

⚠️ 注意事项

• 避免重复初始化：确保该脚本只执行一次，不要在动态加载内容后重复绑定事件（如需支持动态内容，请改用事件委托：$(document).on(‘click’, ‘.product-header-title’, handler)）；
• CSS 优先级：若 .view-grouping-content 被其他样式强制设为 display: block，请检查并提高 .view-grouping-content { display: none } 的选择器权重；
• 无障碍友好：生产环境建议为标题添加 role=”button” 和 aria-expanded / aria-controls 属性，并同步更新状态，以提升屏幕阅读器体验。

✅ 效果总结

• 页面加载时，所有 .view-grouping-content 默认隐藏；
• 点击任意 .product-header-title，仅对应内容展开，其余自动收起；
• 行为符合用户预期，交互流畅，代码简洁可维护。

此方案兼顾实用性与健壮性，是实现轻量级 Accordion 组件的经典实践。