点击图标放大后切换时无法缩小的JavaScript问题

首先，你的核心问题在于当前的regType函数只处理了被点击图标的放大逻辑，完全没考虑把之前已经放大的图标重置回默认的85%宽度。咱们一步步来修复这个问题：

步骤1：修复现有JavaScript逻辑 #

更新你的regType函数，在放大当前图标前，先把所有其他图标恢复到默认宽度：

function regType(type, image) {
  // 设置隐藏输入框的选中值
  document.getElementById('reg_type').value = type;
  
  // 显示注册容器（这里保留你原有逻辑，后续可以优化成CSS类控制）
  var x = document.createElement("STYLE");
  var t = document.createTextNode("#registration-container {display: block;}");
  x.appendChild(t);
  document.head.appendChild(x);
  
  // 关键：获取所有带w85类的图标，批量重置为默认宽度
  const allIcons = document.querySelectorAll('.w85');
  allIcons.forEach(icon => {
    icon.style.width = "85%";
  });
  
  // 最后再把当前点击的图标放大到100%
  const currentIcon = document.getElementById(image);
  currentIcon.style.width = "100%";
}

步骤2：更优雅的实现方式（推荐） #

其实用CSS类来控制缩放状态会更简洁，避免直接操作元素的style属性，后续维护也更方便：

1. 先在CSS里定义两个状态类：

.icon-normal {
  width: 85%;
  transition: width 0.3s ease; /* 可选：加个过渡动画，让缩放更丝滑 */
}
.icon-expanded {
  width: 100%;
}

2. 把HTML里的w85类替换成icon-normal：

<img id="image_1" class="icon-normal" src="/images/child.png">
<!-- 其他图标统一修改成这个类 -->

3. 重写JavaScript函数，用类切换代替直接修改样式：

function regType(type, image) {
  document.getElementById('reg_type').value = type;
  
  // 直接操作元素样式显示容器，比动态创建style标签更直观
  document.getElementById('registration-container').style.display = 'block';
  
  // 先把所有图标恢复到普通状态
  document.querySelectorAll('.icon-normal, .icon-expanded').forEach(icon => {
    icon.classList.remove('icon-expanded');
    icon.classList.add('icon-normal');
  });
  
  // 给当前点击的图标添加放大状态类
  const currentIcon = document.getElementById(image);
  currentIcon.classList.remove('icon-normal');
  currentIcon.classList.add('icon-expanded');
}

为什么之前的尝试无效？ #

你之前只考虑了设置当前图标的宽度，却没有遍历所有图标进行状态重置——之前被点击放大的图标没有被任何代码改回85%，所以会一直保持100%的宽度，自然达不到点击切换的效果。

内容的提问来源于stack exchange，提问作者allen