3
我在那里得到了一个关于我的小代码的小问题。正如你可以看到它是一个纯粹的CSS和HTML手风琴，并按照它应该的工作。但我希望它能够隐藏它的内容，不仅仅是当你点击另一个标题时，而且当你再次点击同一标题时。纯CSS手风琴切换
我没有使用任何JavaScript，但如果有一个简单的方法来处理这些功能，我不介意;-)（只要没有jQuery你需要使用）。
在此先感谢！
body {
font-family: Helvetica;
font-size: 17px;
}
h1 {
text-align: center;
font-size: 40px;
}
label {
font-weight: 500;
/* Rahmenlinie (Dicke = 1px) */
border: 1px solid black;
/* Überschriften-Box Farbe RGB-Wert */
background-color: rgb(219, 219, 219);
border-radius: 3px;
padding: 7px;
}
.pfeil{
font-size: 25px;
}
label:hover {
cursor: pointer;
}
div p{
color: dimgray;
font-size: 15px;
padding-bottom: 5px;
line-height: 1.5;
}
.accordion {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.accordion > label {
display: block;
}
.accordion > input {
display: none;
}
.accordion > div {
max-height: 0;
overflow: hidden;
}
.accordion > input:checked + label + div {
max-height: 1000px;
}<h1>FAQ</h1>
\t
<div class="accordion">
<input id="acrd1-item1" name="accordion1" type="radio">
<label for="acrd1-item1"><span class="pfeil">ℹ</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>
<input id="acrd1-item2" name="accordion1" type="radio">
<label for="acrd1-item2"><span class="pfeil">ℹ</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>
<input id="acrd1-item3" name="accordion1" type="radio">
<label for="acrd1-item3"><span class="pfeil">ℹ</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>
</div>
你好，你可以试着改变你的复选框收音机，因为你不能对于没有js的收音机做“unchecked”。但是，只选择一个组中的一个复选框，您必须使用js示例：http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group – Gregorie