如何获得一个选中的单选按钮后的第一个div

问题描述：

我正在尝试制作手风琴，但我被困在最后一个拼图。如何获得一个选中的单选按钮后的第一个div

我需要在单选按钮之后折叠所有未检查的div。只有选中的单选按钮后的div应该可见。但它不起作用。这是我的HTML

<input type="radio" name="alert" id="overzicht" class="accordion"> 
     <label for="overzicht"> 
      > Overzicht 
     </label> 
     <div class="accordionPanel"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 

     <input type="radio" name="alert" id="categorie" class="accordion"> 
     <label for="categorie"> 
      > Selectie op categorie 
     </label> 
     <div class="accordionPanel"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div>

，这是CSS

input.accordion { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 

input[name=alert] ~ .accordionPanel { 
    max-height: 0; 
    overflow: hidden; 
} 

input[name=alert]:checked .accordionPanel { 
    max-height: 250px; 
    -webkit-transition: max-height .3s ease-in-out; 
    -moz-transition: max-height .3s ease-in-out; 
    -o-transition: max-height .3s ease-in-out; 
    transition: max-height .3s ease-in-out; 
}

使用'输入[名称=警示]：检查+标签+ .accordionPanel {在此添加样式...}'的活动面板。 –

答

使用此：中

input[name=alert]:checked + label + .accordionPanel {

代替input[name=alert]:checked .accordionPanel

请参见下面的演示：

input.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
input[name=alert]~.accordionPanel { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 

 
input[name=alert]:checked+label+.accordionPanel { 
 
    max-height: 250px; 
 
    -webkit-transition: max-height .3s ease-in-out; 
 
    -moz-transition: max-height .3s ease-in-out; 
 
    -o-transition: max-height .3s ease-in-out; 
 
    transition: max-height .3s ease-in-out; 
 
}

<input type="radio" name="alert" id="overzicht" class="accordion"> 
 
<label for="overzicht"> 
 
      > Overzicht 
 
     </label> 
 
<div class="accordionPanel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<input type="radio" name="alert" id="categorie" class="accordion"> 
 
<label for="categorie"> 
 
      > Selectie op categorie 
 
     </label> 
 
<div class="accordionPanel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

你是最好的，我不能接受你的问题，但我会尽快。谢谢！ – apero

欢迎您:) – kukkuz

如何获得一个选中的单选按钮后的第一个div

相关推荐