0

我正在尝试为我的网站制作一种手风琴，类似于本网站上的手风琴，但没有切换。

我正在使用的代码在这里。

我有基本的设置工作，但我似乎无法li正确过渡的高度（如果有的话）；我会很感激一些帮助。

最好该解决方案只使用 CSS，但如果这是唯一/最好的方法，我愿意使用 JS/jQuery。

我已尝试阅读此站点上的其他问题来解决它，但我要么做错了什么，要么解决方案没有帮助。

4

1 回答 1

2

一种方法是使用 CSS3 过渡（在现代浏览器中有效），但不可能（如果我错了，有人可能会纠正我）过渡height: 0;到height: 100%;所以如果你不知道实际高度，一种解决方法是改为使用max-height。在这种情况下，您需要将 设置为max-height比它所能获得的更大的值。

所以添加这样的东西可能是你正在寻找的东西？

li {
    opacity: 0;
    max-height: 0;
}

h2:target~li { /* Want to transition this */
    opacity: 1;
    max-height: 100px;
    -webkit-transition: max-height 1.0s;
       -moz-transition: max-height 1.0s;
        -ms-transition: max-height 1.0s;
         -o-transition: max-height 1.0s;
            transition: max-height 1.0s;
}​

演示

在您的情况下，如果您也想转换 opacity 属性，您可以更改transition: max-height 1.0s;为transition: all 1.0s;这意味着您将转换所有属性。

如果您想了解 CSS3 过渡，请访问以下链接：http: //www.w3.org/TR/css3-transitions/

于 2012-12-08T22:05:10.757 回答