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

【问题标题】：Display Text and Change Parent Size on Radio Button Selection在单选按钮选择上显示文本并更改父大小
【发布时间】：2021-10-11 17:08:36
【问题描述】：

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

我尝试通过 JS 和 CSS 的组合来做到这一点，但根本无法弄清楚如何在选择选项时显示文本并放大父容器。我附上了我的代码以及预期结果的视频和屏幕截图。有没有办法让它动起来？感谢您花时间阅读本文:)。

.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 selected Expected Behavior when not selected Video Mockup

【问题讨论】：

标签： html css forms radio-button css-animations

【解决方案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>

【讨论】：

您好，感谢您抽出宝贵时间回答。你认为有一种方法可以像我在视频模型中那样为元素扩展设置动画吗？再次感谢。
由于我的声望点，我不能这样做。
不知道所需的代表。为你解决了这个问题。
谢谢，你知道如何绕过动画吗？
尝试将.css("display", "block"); 更改为.slideToggle();。