javascript - 展开/折叠常见问题选项卡

Question

我尝试按照本教程在我的 Shopify 商店中创建一个常见问题解答部分。

看起来不错，但是正确展开/折叠答案的 Javascript 代码存在问题。我的经验很少，也无法弄清楚这一点。有人可以指出我正确的方向吗？

这都在一个 .liquid 文件中

HTML部分：

<div class="shopify_explorer__content">
  {%- assign expand_questions = section.settings.expand_questions -%}

  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'separator' -%}
        <h3 class="shopify_explorer_faq__separator h3" {{ block.shopify_attributes }}>{{ block.settings.title | escape }}</h3>

      {%- when 'question' -%}
        <div class="shopify_explorer_faq__item {% unless expand_questions %}shopify_explorer_faq__item--expandable{% endunless %}" {{ block.shopify_attributes }}>
          <h3 class="shopify_explorer_faq__question h5 {% unless expand_questions %}link{% endunless %}">{{ block.settings.title }}</h3>
          <div class="shopify_explorer_faq__answer rte">
            {{ block.settings.answer }}
          </div>
        </div>
    {%- endcase -%}
  {%- endfor -%}
</div>

Javascript部分：

{% javascript %}
(function() {
  $('body').on('click', '.shopify_explorer_faq__question', function() {
    $(this).next('.shopify_explorer_faq__answer').slideToggle(150).toggleClass('active');
    $(this).toggleClass('active');
  });

  $(document).on('shopify:block:select', '#shopify-section-page-shopify_explorer_faq-template', function(event) {
    $(event.target).find('.shopify_explorer_faq__answer').slideDown(150);
  });

  $(document).on('shopify:block:deselect', '#shopify-section-page-shopify_explorer_faq-template', function(event) {
    $(event.target).find('.shopify_explorer_faq__answer').slideUp(150);
  });
}());
{% endjavascript %}

最后是themes.css文件中的CSS：

.shopify_explorer_faq__item--expandable > .shopify_explorer_faq__question {
  cursor: pointer;
}

.shopify_explorer_faq__item--expandable > .shopify_explorer_faq__answer {
  display: none;
}

.shopify_explorer_faq__separator {
  text-transform: none;
  text-align: center;
}
.shopify_explorer_faq__separator :not(:first-child) {
  margin-top: 1.2em;
}

.shopify_explorer_faq__item {
  border-bottom: 1px solid #000;
}
.shopify_explorer_faq__item:not(:last-child) {
  margin-bottom: 0.9em;
}
.shopify_explorer_faq__item .shopify_explorer_faq__question {
  margin-bottom: 0.2em;
  position: relative;
  padding: 5px 15px;
  padding-right: 30px;
  margin: 0;
}
.shopify_explorer_faq__item .shopify_explorer_faq__question.active::before {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.shopify_explorer_faq__item .shopify_explorer_faq__answer {
  padding: 5px 15px;
}
.shopify_explorer_faq__item .shopify_explorer_faq__answer.active {
  border-top: 1px solid #000;
}
.shopify_explorer_faq__item .shopify_explorer_faq__question::before {
  position: absolute;
  right: 0;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  content: '';
  display: block;
  height: 12px;
  margin-top: -11px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 12px;
}
@media (max-width: 590px) {
  .shopify_explorer_faq__item .shopify_explorer_faq__question::before {
    width: 8px;
    height: 8px;
    margin-top: -7px;
    right: 3px;
  }
}

这是我的网站。在这里您可以看到一切都按预期显示，但单击时没有任何反应。

谢谢。

标签： javascripthtmlcssshopify