纯 CSS 滑动切换 - space 在 toggle:checked 和答案之间

Question

我已经通过其他帖子试图找到这个问题的答案但无济于事。我正在尝试创建一个常见问题解答页面，其中包含问题列表和隐藏答案，这些问题会在单击问题（即切换 + 标签）时出现。

我已经使用以下方法成功创建了这个；

.message1{height:0px;font-size:0%;}

 #toggle:checked ~ .message1 {height:100px;font-size: 100%;}>

允许我在单击问题（切换）时召唤每个问题的答案。

我无法实现的是一种在选择多个切换时停止从运行到另一个答案的方法。如果您测试下面的代码并同时单击 toggle1、toggle2 和 toggle3，您将看到问题所在。

欢迎提出任何建议，在此先感谢所有为此花时间的人。

下面是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;      
}

Answer 1

像这样简单的东西对你有用。

.slider {
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

input {
  display: none;
}

input + label {
  padding: 3px;
  display: block;
  cursor: pointer;
  background-color: #ccf;
}

input + label + .slider {
  overflow: hidden;
  max-height: 0;
}

input:checked + label {
  background-color: #99f;
}

input:checked + label + .slider {
  overflow: hidden;
  max-height: 500px; /* approximate max height */
}

<input type="checkbox" id="toggle1" />
<label for="toggle1">Toggle 1</label>
<div class="slider">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
</div>
<input type="checkbox" id="toggle2" />
<label for="toggle2">Toggle 2</label>
<div class="slider">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
</div>

另一种带边框的变体：

.wrap {
  border: 1px solid #99f;
  margin: 0 0 10px;
}

.slider {
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

input {
  display: none;
}

input + label {
  padding: 3px;
  display: block;
  cursor: pointer;
  background-color: #ccf;
}

input + label + .slider {
  overflow: hidden;
  max-height: 0;
}

input:checked + label {
  background-color: #99f;
}

input:checked + label + .slider {
  overflow: hidden;
  max-height: 500px; /* approximate max height */
}

<div class="wrap">
  <input type="checkbox" id="toggle1" />
  <label for="toggle1">Toggle 1</label>
  <div class="slider">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
  </div>
</div>
<div class="wrap">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">Toggle 2</label>
  <div class="slider">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
  </div>
</div>

Note: This couldn't be the best solution, but my few cents. :)

纯 CSS 滑动切换 - space 在 toggle:checked 和答案之间

Pure CSS Slide Toggle - space between toggle:checked & answers

css

checkbox

label

transition

toggle