Question

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

我正在处理的代码是here。

我的基本设置正常，但我似乎无法正确转换li的高度（如果有的话）;我很感激一些帮助。

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

我已尝试在此网站上阅读其他问题以解决此问题，但我要么做错了，要么解决方案没有帮助。

Answer 1

一种方法是使用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;
}

DEMO

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

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

过渡到兄弟姐妹的高度：针对兄弟姐妹？

1 个答案: