PrestaShop选中筛选复选框时仅展开对应隐藏分类项实现方法

两个问题的核心原因都是DOM操作没有限定作用域，且初始化逻辑没有做选中项校验，直接按以下两步修改即可：

1. 修复「点击显示更多按钮所有筛选组同时展开」问题 #

原逻辑点击.more_filter时全局选择所有.toggleable元素操作，没有绑定当前按钮所属的筛选组上下文，修改为仅查找当前按钮所在筛选组内的折叠项即可：

// 绑定显示更多按钮点击事件
$(document).on('click', '.more_filter', function(e) {
  e.preventDefault();
  // 向上查找当前按钮所属的单个筛选组外层容器
  // 若主题自定义过筛选组类名，将 .filter-block 替换为实际的筛选组外层类即可
  const $currentGroup = $(this).closest('.filter-block');
  // 仅操作当前组内的折叠项
  const $toggleItems = $currentGroup.find('.toggleable');

  $toggleItems.slideToggle(200, () => {
    // 同步切换按钮文案
    $(this).text($toggleItems.is(':visible') ? '收起' : '显示更多');
  });
});

2. 修复「页面刷新后无选中项的筛选组被自动展开」问题 #

页面加载时不要直接读取Cookie全局展开所有折叠项，改为逐个遍历筛选组，仅展开组内存在已选中复选框的分组即可：

// 页面加载完成后初始化筛选菜单状态
$(function() {
  // 第一步：默认所有折叠项全部隐藏
  $('.toggleable').hide();

  // 第二步：遍历所有筛选组，检查是否存在已选中的筛选项
  $('.filter-block').each(function() {
    const $group = $(this);
    // 统计当前组内已勾选的复选框数量
    const checkedCount = $group.find('input[type="checkbox"]:checked').length;

    if (checkedCount > 0) {
      // 存在已勾选项则自动展开当前组，同步更新按钮文案
      $group.find('.toggleable').show();
      $group.find('.more_filter').text('收起');
    }
  });

  // Cookie读取逻辑保留即可，无需再做全局展开操作
  // 若需要记住用户手动展开的无选中项分组，可优化Cookie存储结构为已展开分组的ID列表，替代原来存open字符串的逻辑，90秒过期规则可保持不变
  function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? match[2] : null;
  }
});

注意事项 #

• 代码中.filter-block为PrestaShop原生分层导航模块的筛选组默认类名，如果你的主题对筛选模块做过模板自定义，替换为实际包裹单个筛选维度（分类、属性、价格等）的外层容器类名，保证closest()方法能正确定位到当前按钮所属的分组即可。
• 所有针对折叠项的DOM操作必须限定在单个筛选组的范围内，禁止直接使用全局选择器$('.toggleable')操作，即可彻底避免跨组联动展开的问题。

内容的提问来源于stack exchange，提问作者s.lafrag