jquery - 可变高度水平 Accordion

Question

我并不想为客户构建水平 Accordion 设计，但我遇到了一些问题。

Accordion 本身可以工作，但 Accordion 的高度不正确，因为如果我更改容器的宽度， Accordion 内部的内容会被“挤压”。

https://codepen.io/thieukevdb/pen/JajVWW

.content {
    flex: 1 0 0;
    overflow: hidden;
    max-width: 0px;
    transition: .375s ease-in-out;

    &.active {
        max-width: 100%;
    }
}

这里有没有人可以帮助我解决我的问题？

Answer 1

你可能想固定高度，并使用 overflow-y:hidden

.content {
  flex: 1 0 0;
  height: 100px;
  overflow-y: hidden ;
  max-width: 0px;
  transition: .375s ease-in-out;

  &.active {
    max-width: 100%;
  }
}

如果有帮助，请告诉我。

编辑:如果您不想对高度进行硬编码，您可以隐藏选项卡后面的内容，并在激活时使用以下代码使其可见:

.content {
  flex: 1 0 0;
  overflow: hidden;
  max-width: 0px;
  transition: .375s ease-in-out;
  display:none;

  &.active {
    max-width: 100%;
    display: block;
  }
}