Jquery slideToggle（）方法

Question

我已经为FAQ列表编写了简单的代码；每个问题都是在点击事件中打开的，必须手动关闭。有没有办法重新编写此代码，以便在单击要打开的问题（向下滑动）时，以前已打开的问题会自动向上滑动以关闭？

{% javascript %}
(function() {
  $('body').on('click', '.shopify_explorer_faq__question', function() {
    $(this).next('.shopify_explorer_faq__answer').slideToggle(250).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(250);
  });

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

Answer 1

您可以跟踪当前打开的常见问题解答框。只是为了解决这个问题并使它尽可能简单，我们假设每个FAQ框都有一个ID，而框本身就是div：

<div id="faq-1" class="faq-box">
  Text of the FAQ 1
</div>

<div id="faq-2" class="faq-box">
  Text of the FAQ 2
</div>

...

<div id="faq-n" class="faq-box">
  Text of the FAQ n
</div>

您可以这样获得想要的行为：

var current_faq = ''; // Keep track of the current faq box opened

jQuery( '.faq-box' ).on( 'click', function() {
  // Check if it has been clicked the current box
  if ( jQuery( this ).attr( 'id' ) == current_faq ) {
    // It has been clicked the current box, just slide it up to close
    jQuery( this ).removeClass( 'active' ).slideUp();
    // Set current box opened to empty
    current_faq = '';
  else {
    // Slide down this box
    jQuery( this ).addClass( 'active' ).slideDown();
    // Check if there's a current box opened
    if ( current_faq != '' ) {
      // Slide up the current box
      jQuery( current_faq ).removeClass( 'active' ).slideUp();
    }
    // Set the current box
    current_faq = jQuery( this ).attr( 'id' );
  }
} );

Answer 2

您可以通过在使用.not()选择器的第一个函数的顶部简单添加一行来实现所需的行为：

$('body').on('click', '.shopify_explorer_faq__question', function() {
  $('.shopify_explorer_faq__question').not(this).next('.shopify_explorer_faq__answer').slideUp(250);
  $(this).next('.shopify_explorer_faq__answer').slideToggle(250).toggleClass('active');
  $(this).toggleClass('active');
});

Answer 3

HTML

假设HTML是.question和.answer方案的交替模式。

<ul class="faq">
  <li class="question">...</li>
  <li class="answer">...</li>
  ...
</ul>

将主选择器缩小到.faq。 $("body")和$(document)应该用于某些事件，例如"key"或"load"事件类型，而不是常见的事件，例如"click"。

---

jQuery

第二个参数event.data用于指定this（在这种情况下也是event.target）。在下面的示例中，.question为this：

$('.faq').on('click', '.question', function(event) {...

带有变量的参考$(this).next('.answer')。引用jQuery对象的变量通常以$为前缀（推荐但并非必需）。

let $answer = $(this).next('.answer');

---

所需的行为是手风琴的行为：

<< [ >
• .question

  所有同级元素将关闭

• ，但>>] >> this or event.target（以及相关的元素，如果适用）。可以使用this方法选择例外。

event.target

$answer”事件是
Shopify

平台特有的非标准事件。不能100％确定以下内容是否可行，但是如果可以使用

$answer.slideToggle(250).toggleClass('active');
$(this).toggleClass('active');

方法委派它们，则可能可以使用this方法来触发它。

.not()

演示

---

.not()

$('.question').not(this).removeClass('active')
$('.answer').not($answer).slideUp(250).removeClass('active');

'shopify:block:select/deselect'