【发布时间】：2016-04-04 07:48:57
【问题描述】：
我对我的小代码有一个小问题。如您所见，它是一个纯 CSS 和 HTML 手风琴，可以正常工作。但我希望它不仅在您单击另一个标题时隐藏其内容，而且在您再次单击同一标题时也能隐藏其内容。
我没有使用任何 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>
<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 的情况下对收音机进行“未选中”。但是要在组中只选择一个复选框，您必须使用 js 示例：stackoverflow.com/questions/9709209/…