相关疑难解决方法(0)

我有一个纯CSS可折叠div,它基于使用:target伪造类的其他人的代码.我想要设置的是一个包含12个以上问题的页面,当您单击+按钮时,答案div会在下方展开.我无法弄清楚如何在这个页面上制作多个折叠div元素,而无需编写大量额外的CSS.任何人都有关于如何写这个的建议,所以我的CSS代码被最小化？(即,所以我不必为12个以上的问题输入一堆独特的选择器).

我不能使用Javascript,因为这是在一个不允许JS的wordpress.com网站上.

这是我的jfiddle:http://jsfiddle.net/dmarvs/94ukA/4/

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target …

我从3-4天开始尝试这个,但是我不知道如何制作这个动画,甚至不确定是否可以使用CSS3制作这样的动画？

我尝试使用animation-direction:alternate;但是我无法以特定的角度获得此流,能够以方形形状设置它的动画..但不是原子动画的方式,任何想法如何使用纯CSS3实现这一点？如果没有在jQuery中有任何解决方案？