CSS Accordion FAQ的高度问题

Question

我正在使用此a link手风琴菜单创建常见问题解答。问题是高度是固定的，因此每当文本太长时（或在移动设备上），文本就会被删除。

我试过使用高度：auto，overflow：hidden; min-height，！important和所有标签使高度响应，但每当我这样做时，如果我点击选项卡，滚动手风琴效果不起作用或跳转到首页。

我该如何解决这个问题？我不想使用JS或Jquery ...谢谢！

这是css

  .ac-container input:checked ~ article.ac-small {
height: 140px;

}

Answer 1

您需要做的就是为以下属性设置height:auto。

.ac-container input:checked ~ article.ac-small {
    height: auto;
}

是相应身体的一个决定高度。

请更新代码找到link。

Answer 2

您使用的解决方案仅限CSS。 CSS3动画需要一个定义的高度值来生成转换 - 这就是为什么您使用的解决方案提供3种不同的预定义高度。

另一种方法是使用max-height-trick which works for linear animations only though。

最常见的解决方案是通过jQuery的slidetoggle（）切换动画。