如何在单击时添加类，如果兄弟姐妹具有该类，则如何删除该类。然后滚动到单击的元素

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，您必须进行循环以删除每个元素打开的类。

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