如何仅点击指定按钮时平滑扩展登录注册表单的div容器

问题根源 #

你之前把点击事件绑定在了整个表单容器上，容器内任何元素（输入框、文字等）被点击时，事件都会冒泡到容器触发toggle，所以才会出现点哪都触发伸缩的情况。

纯JS实现方案 #

把事件绑定到登录和注册按钮上，分别控制容器的收缩和扩展即可：

1. 给HTML里的两个按钮添加唯一ID：

<div class="form-container" id="form-container">
  <!-- 其余表单元素 -->
  <button id="login-btn">登录</button>
  <button id="register-btn">注册</button>
</div>

2. 修改JavaScript代码，替换原有的容器点击事件：

window.onload = function() {
  const formContainer = document.getElementById("form-container");
  
  // 注册按钮：添加类名触发容器扩展
  document.getElementById("register-btn").addEventListener("click", function() {
    formContainer.classList.add("is-active");
  });
  
  // 登录按钮：移除类名触发容器收缩
  document.getElementById("login-btn").addEventListener("click", function() {
    formContainer.classList.remove("is-active");
  });
}

3. 原有CSS代码保持不变即可。

额外提示 #

• 如果按钮已有类名，也可以用类选择器（比如document.querySelector(".register-btn")）替代ID选择器，只要能精准选中目标按钮就行。
• 若担心按钮事件冒泡影响其他逻辑，可在按钮的事件处理函数中添加event.stopPropagation()，不过当前方案无需额外处理。

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