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