如何获取选中的单选按钮后的第一个div [英] How to get the first div after a checked radio button

问题描述

我需要在收音机后立即折叠所有未检查过的div。

我试图制作手风琴，但是我困在最后一块拼图中。纽扣。只有选中的单选按钮后的div应该可见。但它不起作用。这是我的html

 < input type =radioname =alertid =overzichtclass =accordion > 
< label for =overzicht> 
> Overbicht 
< / label> 
< div class =accordionPanel> 
< p> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。如果你想让自己的工作变得更加轻松，那么就应该尽量多做一些工作。< / p> 
< / div> 
 
< input type =radioname =alertid =categorieclass =accordion> 
< label for =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。如果你想让自己的工作变得更加轻松，那么就应该尽量多做一些工作。< / p> 
< / div> 
  

这是css

  input.accordion {
 background-color：#eee; 
颜色：＃444; 
光标：指针; 
 padding：18px; 
宽度：100％; 
 border：none; 
 text-align：left; 
概述：无; 
 font-size：15px; 
转换：0.4s; 
} 
 
 input [name = alert]〜.accordionPanel {
 max-height：0; 
 overflow：hidden; 
} 
 
 input [name = alert]：checked .accordionPanel {
 max-height：250px; 
 -webkit-transition：max-height .3s缓入; 
 -moz-transition：max-height .3s缓入; 
 -o-transition：max-height .3s缓入; 
转换：最大高度.3s缓入; 
 
  

解决方案

使用这个：

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

$ b $

而不是 input [name = alert]：checked .accordionPanel

请参阅下面的演示：

  input.accordion {background-color ：#eee;颜色：＃444;光标：指针;填充：18px;宽度：100％; border：none; text-align：left;概要：无; 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：最大高度.3s缓入; -moz-transition：最大高度.3s缓入; -o-transition：最大高度.3s缓入; transition：max-height .3s ease-in-out;}  

< input type =radioname =alertid =overzichtclass =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广告微量veniam，QUIS nostrud实习ullamco laboris的NiSi UT aliquip离EA commodo consequat< / P>< / DIV><输入类型= 无线电 名称= 提醒 ID = categorie 类=手风琴>< label for =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。 < / div>

>

I'm trying to make an accordion but I'm stuck at the last pice of the puzzle.

I need to collapse all NOT checked div right after radio buttons. Only the div after a checked radio button should be visible. But it's not working. This is my 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>

and this is the 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;
}

解决方案

Use this:

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

instead of input[name=alert]:checked .accordionPanel

See demo below:

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>

这篇关于如何获取选中的单选按钮后的第一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！