本文介绍如何使用 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') —— 因标题 <h1> 的父级是 .view-grouping-header，其同级下一个元素正是目标内容区块。
? 完整可运行代码
<style>
.view-grouping-content {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.product-header-title').click(function(e) {
// 1. 收起所有已展开的内容
$('.view-grouping-content').hide();
// 2. 展开当前标题对应的内容区块
$(this).closest('.view-grouping').find('.view-grouping-content').show();
});
});
</script>✅ 优化说明：相比原答案中使用的 parent().next()，我们改用 $(this).closest('.view-grouping').find('.view-grouping-content')，更健壮——它不依赖严格的 DOM 顺序（如中间插入其他元素也不失效），语义更明确，推荐在实际项目中采用。
? HTML 结构要求（关键约定）
确保每组内容严格遵循以下嵌套结构：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<div class="view-grouping">
<div class="view-grouping-header">
<h1 class="product-header-title">标题文本</h1>
</div>
<div class="view-grouping-content">
<!-- 展开后显示的内容 -->
</div>
</div>只要结构合规，上述 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 组件的经典实践。
