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框来执行此操作。为了修正这个想法并使其尽可能简单，让我们假设每个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

假设超文本标记语言是.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');

所需行为是accordion的行为

• 当单击多个相似的元素兄弟中的一个元素(.question，即this or event.target)时，如果该元素最初是关闭的，将切换为打开(和/或其关联的element - $answer)，反之亦然。

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

• 所有同级元素都将关闭，但 this除外(如果适用，还会关闭相关元素)。可以使用.not()方法选择异常。

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

'shopify:block:select/deselect'事件是购物平台独有的非标准事件。不是100%确定下面的方法是否可以工作，但是如果可以用.on()方法委托它们，那么可以用.trigger()方法触发它。

if ($(this).hasClass('active')) {
  $answer.trigger('shopify:block:select');
  $('.answer').not($answer).trigger('shopify:block:deselect');
} else {
  $('.answer').trigger('shopify:block:deselect');
} 

演示

​

$(function() {
  $('.answer').hide();
  $('.faq').on('click', '.question', function(e) {
    let $answer = $(this).next('.answer');
    $answer.slideToggle(250).toggleClass('active');
    $(this).toggleClass('active');
    $('.question').not(this).removeClass('active');
    $('.answer').not($answer).slideUp(250).removeClass('active');
    if ($(this).hasClass('active')) {
      $answer.trigger('shopify:block:select');
      $('.answer').not($answer).trigger('shopify:block:deselect');
    } else {
      $('.answer').trigger('shopify:block:deselect');
    }
  });
});

:root {
  font: 400 3vw/6vh Arial
}

li {
  padding: 3vh 2vw 1vh;
  margin-bottom: 2vh
}

.question {
  cursor: pointer
}

.answer {
  list-style: none;
  color: blue
}

.active {
  text-decoration: underline;
  font-weight: 900
}

<main>
  <section>
    <header>
      <h1>FAQ</h1>
    </header>
    <ul class='faq'>
      <li class='question'>Question?</li>
      <li class='answer'>Answer.</li>
      <li class='question'>Question?</li>
      <li class='answer'>Answer.</li>
      <li class='question'>Question?</li>
      <li class='answer'>Answer.</li>
      <li class='question'>Question?</li>
      <li class='answer'>Answer.</li>
      <li class='question'>Question?</li>
      <li class='answer'>Answer.</li>
    </ul>
  </section>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​