Question

在我负责前端开发的日子里，我只能通过CSS加javascript来实现扩展/崩溃行为。是否已经可以在CSS3中完全编写扩展/折叠解决方案？

编辑：我打算做的是类似this的东西，但这里使用的是jQuery。

Answer 1

借鉴here并略微调整：

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
    display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   display: block
}

Fiddle

使用FadeIn进行高级展示:(已编辑，不需要评论中指出的关键帧！）http://jsfiddle.net/Dxvf7/2/

/* Default State */
 div.container > div {
    background: green;
    width: 400px;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    opacity: 0;
    height: 0;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
}
/* Toggled State */
 div.container > input[type=checkbox]:checked ~ div {
    opacity: 1;
    height: auto;
}

在CSS3中完全展开/折叠

1 个答案: