本文介绍如何使用 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()，因为内容区块并非标题的子元素或同级任意兄弟，而是特定结构下的下一个兄弟。
✅ 完整可运行代码
<!-- CSS：初始隐藏所有内容区块 -->
<style>
.view-grouping-content { display: none; }
</style>
<!-- HTML 结构（精简示意，实际可含多个 .view-grouping） -->
<div class="view-content">
<div class="view-grouping">
<div class="view-grouping-header">
<a href="/product/football"><img src="football.png.jpg" alt="实现点击标题展开对应内容区块并自动收起其他已展开区块的交互效果" ></a>
<h1 class="product-header-title">Football World Cup</h1>
</div>
<div class="view-grouping-content">
<h3>Football is a family of team sports...</h3>
<p>There are conflicting explanations...</p>
</div>
</div>
<!-- 更多 .view-grouping... -->
</div>
<!-- jQuery 脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.product-header-title').on('click', function(e) {
e.preventDefault(); // 可选：阻止默认跳转（若标题含链接且无需立即跳转）
// 1. 先隐藏所有已展开的内容区块
$('.view-grouping-content').hide();
// 2. 再显示当前标题对应的内容区块
$(this).parent('.view-grouping-header').next('.view-grouping-content').show();
});
});
</script>? 关键要点说明
- 无需 $(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」的约定，此代码即可开箱即用，稳定支撑多区块折叠/展开交互。
