使用以下命令使兄弟<div>可见：已检查css伪类，没有javascript

Question

我正在尝试按照this文章中发布的示例进行操作，并且我无法复制在选中单选按钮后新元素变为可见的行为。

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
}

<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
	  				<option display:none disabled selected value></option>
	  				<option value="highschool">High School</option>
	  				<option value="undergrad">Undergraduate</option>
	  				<option value="grad">Graduate</option>
	  			</select>
  </div>
</div>

Answer 1

使用选择器:checked + nextElSelector（Adjacent sibling selector）选中已检查输入旁边的元素：

span {
  visibility: hidden;
}
input:checked + span {
  visibility: visible;
}

<input type="checkbox"/><span>TADA!</span>

您的示例CSS实际上是同一站点的SASS部分，除了您删除了一些元素。

Answer 2

将input选择器更改为以下内容：

input[type="radio"]:checked + .reveal-if-active {}

请注意+。这是相邻的兄弟选择器，在两者之间是必要的，以便在选中单选按钮时更改隐藏元素的不透明度。

＆＃13;

＆＃13;

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
}

input[type="radio"]:checked + .reveal-if-active {
  opacity: 1;
  max-height: 100px;
  padding: 10px 20px;
  transform: scale(1);
  overflow: visible;
}

＆＃13;

<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
      <option value="highschool">High School</option>
      <option value="undergrad">Undergraduate</option>
      <option value="grad">Graduate</option>
    </select>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

下面是原始CSS

中的ID更新代码段

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;

}
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
  
input[type="radio"]:checked + .reveal-if-active{
 opacity:1; 
 max-height:initial;
}

<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
	  				<option display:none disabled selected value></option>
	  				<option value="highschool">High School</option>
	  				<option value="undergrad">Undergraduate</option>
	  				<option value="grad">Graduate</option>
	  			</select>
  </div>
</div>

Answer 4

您的选择器应如下所示

 input[type="radio"]:checked ~ .reveal-if-active{

Answer 5

如何使用Jquery？
您将通过使用此代码了解是否已选中单选按钮。在$(this).is(':checked')函数内change。

＆＃13;

＆＃13;

$(function() {
  $('#student').on("change", function() {
    $('.reveal-if-active').css({
      'opacity': '1',
      'max-height': '100px'
    });
  });
});

＆＃13;

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
	  				<option display:none disabled selected value></option>
	  				<option value="highschool">High School</option>
	  				<option value="undergrad">Undergraduate</option>
	  				<option value="grad">Graduate</option>
	  			</select>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;