Accordian 過濾器在單擊時全部展開和收縮

Question

我有一個產品頁面，其中包含產品過濾器的側邊欄。 每個產品都包含一組標簽，用於為該頁面創建過濾器。 我正在嘗試將過濾器組放入我設法做到的手風琴中。 但是，當我單擊以擴展或收縮其中一個組時，它們都會擴展或收縮。

我相信這是因為我將每個手風琴設置為在單擊時處於活動狀態。 但是，我正在努力僅將我單擊的組設置為活動狀態。

下面的 HTML 代碼針對產品具有的每個過濾器組循環。

HTML 代碼：

  <h5><a href="#" class="tgl_btn">{{ cat_item }}</a></h5>
  <div class="tgl_c">
    <ul class="advanced-filters">   
      {% comment %}
      Loop through collection tags
      {% endcomment %}
      {% for tag in collection.all_tags %}
      {% assign cat = tag | split: '_' | first %}              
      {% if cat != tag and cat_item == cat %}
      {% comment %}
      Strip out tag category prefix and add/remove link for tag filtering
      {% endcomment %}
      {% if current_tags contains tag %}
      <li class="advanced-filter active-filter" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_remove_tag: tag }}</li>
      {% else %}
      <li class="advanced-filter" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_add_tag: tag }}</li>
      {% endif %}
      {% endif %}
      {% endfor %}
    </ul>
  </div>

JS代碼

  $(".sidebar h5").click(function (e) {
    e.preventDefault();

    $(this).parent().find(".tgl_c").slideToggle(300);
    if ($(this).hasClass("active")) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
    }
  });

截屏：

Answer 1

$(this).parent().find(".tgl_c").slideToggle(300);

... 獲取父級然后找到所有.tgl_c並調用slideToggle()方法。 相反，請嘗試：

$(this).next().slideToggle(300);