1
我已經通過其他帖子試圖找到這個答案無濟於事。我正嘗試創建一個常見問題解答頁面，其中列出了問題列表，並在點擊問題（即切換+標籤）時顯示隱藏答案。純CSS滑動切換 - 切換之間的空間：檢查與答案
我已經成功地創建了這個使用;
.message1{height:0px;font-size:0%;}
#toggle:checked ~ .message1 {height:100px;font-size: 100%;}>
允許我在單擊問題（切換）時召喚每個問題的答案。
我無法實現的是在選擇多個切換時停止答案運行到另一個的方法。 如果您測試下面的代碼並單擊切換1，切換2 &切換3，您將看到問題。
歡迎任何建議，在此先感謝任何花時間在此的人。
下面是HTML：
<input type="checkbox" name="toggle1" id="toggle1" />
<label for="toggle1"><p class ="question">This is the first question</p></label>
<div class="message1">
<p class = "answer">
Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
</p>
</div>
<input type="checkbox" name="toggle2" id="toggle2" />
<label for="toggle2"><p class ="question">This is the second question</p></label>
<div class="message2">
<p class = "answer">
Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
</p>
</div>
<input type="checkbox" name="toggle3" id="toggle3" />
<label for="toggle3"><p class ="question">This is the third question</p></label>
<div class="message3">
<p class = "answer">
Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
</p>
</div>
而CSS：
p.question{
color: #0061b5;
font-size: 200%;
font-family:'Questrial',sans-serif;
line-height: 2.0;
}
p.answer{
color:#181818;
font-size: 150%;
font-family:'Questrial',sans-serif;
line-height: 2.0;
transition: color 0.05s ease-in;
}
#toggle1,
#toggle2,
#toggle3{
position:absolute;
appearance:none;
left:-100%;
top:-100%;
}
#toggle1 + label {
margin: 0% 0% 3% 3%;
width: 40em;
height: 5em;
position:absolute;
cursor:pointer;
border: 1px solid blue;
}
.message1 {
margin: 3.5% 0% 0.5% 3%;
padding: 0%;
position: absolute;
width: 60%;
height: 0px;
transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
border: solid 0px #000000;
font-size: 0%;
}
#toggle1:checked ~ .message1 {
font-size: 100%;
height: 100px;
padding: 0.5%;
border: 1px solid red;
}
#toggle1:checked ~ #toggle2 + label {top: 12%;}
#toggle1:checked ~ .message2 {top: 15%;}
#toggle1:checked ~ #toggle3 + label{top:15%;}
#toggle1:checked ~ .message3 {top:21%;}
#toggle2 + label {
margin: 5% 0% 3% 3%;
width: 40em;
height: 5em;
position:absolute;
cursor:pointer;
transition: margin-top 100ms ease-in;
border: 1px solid blue;
}
.message2 {
margin: 9% 0% 0.5% 3%;
padding: 0%;
position: absolute;
width: 60%;
height: 0px;
transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
border: solid 0px #000000;
font-size: 0%;
}
#toggle2:checked ~ .message2 {
font-size: 100%;
height: 100px;
padding: 0.5%;
border: 1px solid red;
}
#toggle2:checked ~ #toggle3 + label {top: 15%;}
#toggle2:checked ~ .message3 {top: 15%;}
#toggle3 + label {
margin: 10% 0% 3% 3%;
width: 40em;
height: 8em;
position:absolute;
cursor:pointer;
transition: margin-top 200ms ease-in;
border: 1px solid blue;
}
.message3 {
margin: 16% 0% 0.5% 3%;
padding: 0%;
position: absolute;
width: 60%;
height: 0px;
transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
border: solid 0px #000000;
font-size: 0%;
}
#toggle3:checked ~ .message3 {
font-size: 100%;
height: 180px;
padding: 0.5%;
border: 1px solid red;
}
不當使用'position：absolute'。 :( –
謝謝，我會得到修復:) –