多个 div 的 CSS 向上/向下滑动过渡。 将它们放置在相同位置的问题（替换位置）

Question

如果你看看这个小提琴，你就会明白问题是什么。

小提琴

问题 ：

1) 单击“Salgsaparat”时，我无法让第二个div替换第一个div的位置。 它堆叠在下面。

2）我应该如何使用翻译（减去）偏移量来确保其他 div 一开始是不可见的？

3）我必须先像这样“启动”div吗？ $('#kunderContainer').addClass('closed')似乎没有必要，但我不知道怎么做。

Answer 1

像这里的 jsfiddle 这样的东西？ 您可以将opened的类添加到要首先显示的幻灯片中，然后删除该类并将其添加到下一张幻灯片中。 也position:absolute; 使元素不会被推下。 您不需要为您正在尝试做的事情开设closed课程。

Answer 2

我认为通过添加以下 css 行可以轻松完成您要执行的操作：

显示：无！重要；

当滑块关闭时，您需要添加此行。

除非有特殊原因，否则您试图抵消项目以使它们隐藏？

  .slider.opened {
  /* visible */
  -webkit-transform: translate(0, 0%);
  -moz-transform: translate(0, 0%);
  -ms-transform: translate(0, 0%);
  transform: translate(0, 0%);
  display: none !important;
}