OpenCart筛选插件实现单data-toggle展开功能求助（JS/jQuery新手）

嘿，作为刚接触JavaScript和jQuery的新手，这个需求其实不难搞定！我来一步步帮你实现仅同时展开一个筛选选项div的效果：

核心思路 #

点击某个筛选选项（比如分类、尺寸）的触发按钮时，先收起所有已展开的筛选内容div，再展开当前点击对应的那个；如果当前内容已经是展开状态，就只收起它。

具体代码实现 #

假设你的筛选插件里，每个选项的触发按钮有共同的类名（比如.filter-toggle），对应的隐藏内容div有类名（比如.filter-content），你可以用这段jQuery代码：

$(document).ready(function() {
  // 绑定筛选按钮的点击事件
  $('.filter-toggle').on('click', function(e) {
    // 阻止默认跳转（如果按钮是<a>标签的话）
    e.preventDefault();
    
    // 获取当前按钮对应的内容区域
    const $currentContent = $(this).closest('.filter-item').find('.filter-content');
    
    // 判断当前内容是否显示：如果显示就收起，否则先关其他再开当前
    if ($currentContent.is(':visible')) {
      $currentContent.slideUp();
    } else {
      // 收起所有其他筛选内容
      $('.filter-content').not($currentContent).slideUp();
      // 展开当前选中的内容
      $currentContent.slideDown();
    }
  });
});

适配你的插件 #

如果你的插件类名和上面不一样，别慌：

1. 打开浏览器开发者工具（F12），点击筛选按钮，查看它的类名（比如可能是.filter-heading）
2. 找到对应的隐藏div，查看它的类名（比如.filter-collapse）
3. 把代码里的.filter-toggle和.filter-content替换成你实际的类名就行

避免冲突小技巧 #

如果插件本身已经有点击事件，可能会和我们的代码冲突，这时候可以先解绑原有事件再绑定新的：

$('.filter-toggle').off('click').on('click', function(e) {
  // 上面的逻辑代码
});

代码放置位置 #

你可以把这段代码放在OpenCart的自定义JS文件里，比如catalog/view/javascript/custom.js，或者直接在筛选页面的模板底部添加<script>标签插入这段代码。

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