Question

我试图制作一支手风琴，但我却陷入困境的最后一片。

我需要在单选按钮后折叠所有未检查的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;
}

Answer 1

使用此：

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>

如何在选中单选按钮后获取第一个div

1 个答案: