实现点击标题展开对应view-grouping-content并关闭已展开内容的交互

需求说明 #

• 页面加载时，所有.view-grouping-header保持显示，.view-grouping-content默认隐藏
• 点击任意.product-header-title标题时：
  • 展开该标题所属分组的.view-grouping-content
  • 自动关闭其他所有已展开的.view-grouping-content

原代码问题 #

原jQuery逻辑点击时会显示所有内容面板，没有区分当前点击项对应的目标内容，也未处理关闭其他面板的逻辑，导致无法满足需求。

修正后的代码 #

CSS（无需修改，保持原逻辑即可）

.view-grouping-content {
    display: none;
}

jQuery 代码

jQuery(function($){
    // 页面加载时确保所有内容面板隐藏（与CSS配合，增强兼容性）
    $('.view-grouping-content').hide();

    $('.product-header-title').click(function(e){
        // 阻止默认行为（避免后续结构调整为链接时出现跳转）
        e.preventDefault();
        
        // 定位当前点击标题对应的内容面板
        const $targetContent = $(this).closest('.view-grouping').find('.view-grouping-content');
        
        // 关闭所有其他内容面板
        $('.view-grouping-content').not($targetContent).hide();
        
        // 切换当前内容面板的显示状态（点击已展开面板时会关闭）
        $targetContent.toggle();

        // 若需强制点击后始终展开当前面板（无论之前状态），替换上面的toggle为：
        // $targetContent.show();
    });
});

代码逻辑说明 #

1. 精准定位目标：通过closest('.view-grouping')向上遍历找到当前标题所在的分组容器，确保只操作对应分组的内容面板，避免全局误操作。
2. 排他性展开：使用.not($targetContent)排除当前目标面板，先关闭其他所有面板，再切换/显示当前面板。
3. 兼容性处理：加入e.preventDefault()预防后续结构调整为链接时的跳转问题，同时保留CSS默认隐藏的逻辑增强加载时的稳定性。

内容的提问来源于stack exchange，提问作者Rahul Dravid