javascript - 如何更改代码以使其适用于多个实例

Question

我正在尝试为FAQ 手风琴制作动画。我可以获得第一个动画问题/答案，但是当我复制块时，该块不会动画。我是 javascript 的初学者，但我认为这个问题是因为手风琴创建了 2 个实例，而脚本现在无法控制这两个实例。

谁能修复这个javascript代码？

(function($) {

  var rankMath = {
    accordion: function() {
      $('#rank-math-faq').find('.rank-math-answer').hide();
      $('#rank-math-faq').find('.rank-math-question').click(function() {
        //Expand or collapse this panel
        $(this).nextAll('.rank-math-answer').eq(0).slideToggle('fast', function() {
          if ($(this).hasClass('collapse')) {
            $(this).removeClass('collapse');
          } else {
            $(this).addClass('collapse');
          }
        });
        //Hide the other panels
        $(".rank-math-answer").not($(this).nextAll('.rank-math-answer').eq(0)).slideUp('fast');
      });

      $('#rank-math-faq .rank-math-question').click(function() {
        $('#rank-math-faq .rank-math-question').not($(this)).removeClass('collapse');
        if ($(this).hasClass('collapse')) {
          $(this).removeClass('collapse');
        } else {
          $(this).addClass('collapse');
        }
      });
    }
  };

  rankMath.accordion();

})(jQuery);

#rank-math-faq .rank-math-list-item {
  margin-bottom: 1em;
  margin-top: 1em;
  border-bottom: 1px solid #fff;
}

.rank-math-question {
  cursor: pointer;
  position: relative;
  display: block;
  padding-right: 1em;
  margin-right: 1em;
  font-weight: 300;
  margin-top: 30px;
}

.rank-math-question:after {
  position: absolute;
  right: 5px;
  top: 0;
  content: "\2715";
  transform: rotate(-45deg);
  transition: all 150ms ease-in-out;
}

.rank-math-question.collapse:after {
  transform: rotate(0deg);
}

.rank-math-question:hover {
  color: #ed1368;
}

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

<div class="gb-grid-wrapper gb-grid-wrapper-3f293974">
  <div class="gb-grid-column gb-grid-column-565bd970">
    <div class="gb-container gb-container-565bd970">
      <div class="gb-inside-container">
        <div id="rank-math-faq" class="rank-math-block">
          <div class="rank-math-list ">
            <div id="faq-question-1615917457234" class="rank-math-list-item">
              <h3 class="rank-math-question collapse">Question</h3>
              <div class="rank-math-answer collapse" style="">
                <p>Answer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="gb-grid-column gb-grid-column-0eeb2a9d">
    <div class="gb-container gb-container-0eeb2a9d">
      <div class="gb-inside-container">
        <div id="rank-math-faq" class="rank-math-block">
          <div class="rank-math-list ">
            <div id="faq-question-1615919272707" class="rank-math-list-item">
              <h3 class="rank-math-question">Question</h3>
              <div class="rank-math-answer " style="display: none;">
                <p>Answer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascripthtml