jquery - 如果 sibling 拥有该类(class)，如何在单击时添加类(class)并删除该类(class)。然后滚动到点击的元素

Question

我在一个表单中有三个部分，所有部分都已折叠。这个想法是，当您单击其中一个时，它会打开并显示其内容。然后滚动到单击的元素。如果其中之一已经打开，则打开的必须关闭。

所以目前我有这段代码并且运行良好:

$('.form__step__wrapper').click(function(){
  $(this).siblings().removeClass('open');
  $(this).addClass('open');
  $([document.documentElement, document.body]).animate({
    scrollTop: $(this).offset().top
  }, 200);
});

此代码的唯一问题是:当您单击某个打开元素下方 的元素时，它不会滚动到顶部，而是滚动到中间某处。如果我删除该功能:

$(this).siblings().removeClass('open');

它像它应该的那样工作，并且它平滑地滚动到正确的位置。但是当另一个部分应该再次折叠时，它会保持“打开”状态。

我认为这与 jQuery 从打开的部分中删除类有关，这会导致主体高度不同，因此您要滚动到的部分的位置会发生变化。

有人知道如何解决这个问题吗？

提前谢谢你。

Answer 1

您可以使用 Jquery 的方法 closest 或 parent。要使用 siblings，您必须创建一个循环来移除每个元素的类 open。

$(this).parent().find('.form__step__wrapper.open').removeClass('open');
$(this).addClass('open');