点击搜索按钮触发页面重载 容器隐藏效果失效问题排查

放在<form>内部的<button>默认type属性为submit，点击后会触发表单默认提交逻辑，导致页面重载。页面刷新后所有JS动态修改的DOM状态（比如给.content加的hide类）、内存里的变量（比如你写的se状态标记）都会被重置，容器自然会回到初始显示的状态。
另外你最初的需求是点击搜索栏时隐藏容器，现有代码把事件绑定在了搜索按钮上，本身交互触发节点就不对。

方案1：阻止默认提交行为（适配前后端交互搜索场景） #

在按钮点击事件回调里拦截默认提交行为，同时补上搜索输入框的聚焦触发逻辑，修正后的JS代码如下：

const search_btn = document.querySelector(".search_btn");
const search_input = document.querySelector('input[name="search"]');
const content = document.querySelector(".content");

let isContentHide = false;

// 点击搜索输入框时隐藏内容容器
search_input.addEventListener('focus', () => {
  if (!isContentHide) {
    content.classList.add('hide');
    isContentHide = true;
  }
})

search_btn.addEventListener("click", (e) => {
  // 核心：阻止表单默认提交刷新页面
  e.preventDefault();
  // 原有切换逻辑，不需要可以删掉，替换成实际搜索业务代码
  content.classList.toggle('hide');
  isContentHide = !isContentHide;
});

如果你的搜索逻辑需要提交参数给后端，直接在preventDefault()之后写接口请求逻辑即可，不会触发页面刷新。

方案2：修改按钮原生类型（适配纯前端交互场景） #

直接给搜索按钮添加type="button"属性，从根源上禁止按钮触发表单提交，不需要额外写JS拦截：

<button class="search_btn" type="button">
  <i class="fas fa-search" style="font-size: 18px;"></i>
</button>

注意：如果后续需要对接后端表单提交，这个方案需要额外写提交逻辑，不如方案1灵活。

• 状态变量不要用se这种无意义命名，换成isContentHide这类语义化命名，后续维护成本更低
• 类名切换可以直接用classList.toggle()方法，不需要手动写if判断加类、删类，代码更简洁

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