我并不想为客户构建水平 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%;
}
}
这里有没有人可以帮助我解决我的问题?
最佳答案
你可能想固定高度,并使用 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;
}
}
关于jquery - 可变高度水平 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51948584/