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

【问题标题】：How to add class on click and remove that class if siblings have that class. Then scroll to the clicked element如果兄弟姐妹有该类，如何在单击时添加类并删除该类。然后滚动到点击的元素
【发布时间】：2020-03-16 08:53:51
【问题描述】：

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

所以目前我有这段代码，而且效果很好：

$('.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 从打开的部分中删除类有关，这会导致正文高度不同，因此您要滚动到的部分的位置会发生变化。

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

提前谢谢你。

【问题讨论】：

您尝试实现的功能称为手风琴或折叠。
您是否对切换可见性的元素应用了任何过渡，这些过渡可能会在调用滚动时影响文档高度？
@Cue 是的，我有。
@ThomasTromp 你能在你的代码示例中证明这一点吗？在触发滚动之前，您可能需要一个事件侦听器来等待转换结束。

标签： jquery css sass

【解决方案1】：

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

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

【讨论】：