在单选按钮选择上显示文本并更改父级大小

Question

我正在构建一个表单，用户可以在其中 select 使用单选按钮选择三个选项之一。当用户 select 是其中一个选项时，我需要在该选项下显示一些文本，作为对各个选项的描述。包含选项的容器必须增加高度以适合描述。

我已经尝试通过 JS 和 CSS 的组合来做到这一点，但是当一个选项被 selected 时，我根本不知道如何显示文本和放大父容器。我附上了我的代码以及预期结果的视频和屏幕截图。有办法让它动画化吗？感谢您花时间阅读本文:)。

.select {
  display: grid;
  border: 3px solid #385663;
  padding: 10px 27px 10px 27px;
  border-radius: 18px;
  width: 500px;
  margin: 25px;
}

.select-top {
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Selects</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-1">
          <label for="option-1">
              <p>Option 1</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-2">
          <label for="option-2">
              <p>Option 2</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-3">
          <label for="option-3">
              <p>Option 3</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
</body>
</html>

Expected Behavior when selectedExpected Behavior when not selectedVideo Mockup

Answer 1

我修复了一些 HTML 问题（标签未正确关闭，p 在标签内）。

这只是其中一种方法。如果有很多按钮可能会有点尴尬，但只要3个就不错了。

// add a click function to each radio button, in one step.
$("input[type='radio']").on("click", function() {

  // first hide all radio-text paragraphs.
  $(".radio-text").css("display", "none");

  // show only the one you want, based on the id.
  switch ($(this).attr("id")) {
    case "option-1":
      $(".radio-text").eq(0).css("display", "block");
      break;
    case "option-2":
      $(".radio-text").eq(1).css("display", "block");
      break;
    case "option-3":
      $(".radio-text").eq(2).css("display", "block");
      break;
    default:
      // nada.
  }
});

.select {
  display: grid;
  border: 3px solid #385663;
  padding: 10px 27px 10px 27px;
  border-radius: 18px;
  width: 500px;
  margin: 25px;
}

.select-top {
  display: flex;
  align-items: center;
}

/* start with all text hidden (i presume). */
.radio-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-1" />
    <label for="option-1">Option 1</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</div>
<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-2" />
    <label for="option-2">Option 2</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
  </div>
</div>
<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-3" />
    <label for="option-3">Option 3</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</div>

在单选按钮选择上显示文本并更改父级大小

Display Text and Change Parent Size on Radio Button Selection

html

css

forms

radio-button

css-animations