如何通过单选按钮（radio buttons）正确控制div的放大与缩小

架构老林

2026-9-29

问题根因

当前代码每次触发toggle函数时，都会直接读取表单的实时高度作为基准执行加减200px的操作，没有校验是否已经执行过对应缩放操作，所以重复选中同一个单选按钮时，会反复触发高度调整，导致表单高度无限增大或缩小。

修复方案

按照你要求的布尔值标记状态的思路，可以新增全局变量记录表单当前的展开状态，只有状态发生切换时才执行高度调整，避免重复操作。修改后的JS代码如下：

// 标记表单是否处于展开状态
let isExpanded = false;
// 初始基础高度和CSS中form的初始高度保持一致
const BASE_FORM_HEIGHT = 400;
// 展开时额外增加的高度
const EXPAND_EXTRA_HEIGHT = 200;

toggle();

function toggle() {
  const optionA = document.getElementById("yes");
  const optionB = document.getElementById("no");
  const question = document.getElementById("moreQuestions");
  const form = document.getElementById("form");

  if (optionA.checked && !isExpanded) {
    // 选中「是」且当前未展开时才执行放大操作
    question.style.display = "";
    form.style.height = `${BASE_FORM_HEIGHT + EXPAND_EXTRA_HEIGHT}px`;
    isExpanded = true;
  } else if (optionB.checked && isExpanded) {
    // 选中「否」且当前已展开时才执行缩小操作
    question.style.display = "none";
    form.style.height = `${BASE_FORM_HEIGHT}px`;
    isExpanded = false;
  } else {
    // 无选中状态默认隐藏额外问题，恢复基础高度
    question.style.display = "none";
    form.style.height = `${BASE_FORM_HEIGHT}px`;
    isExpanded = false;
  }
}