桌面端点击搜索栏时右侧菜单移出屏幕的技术问题排查

我帮你分析了这个问题，核心原因是桌面端的样式规则和JavaScript逻辑没有适配设备差异，导致点击搜索栏时错误地让右侧菜单移出了屏幕。

问题根源拆解 #

1. CSS媒体查询的冲突
   你的代码里，桌面端（比如@media (min-width: 769px)）的右侧菜单默认是显示状态（比如right: 0），但rightMenuOut类在桌面端的样式依然设置了right: -300px（直接移出屏幕）。当点击搜索栏时，JavaScript会全局给右侧菜单加上这个类，不管当前是桌面还是移动设备，自然就出现了桌面端菜单被弄没的问题。

2. JavaScript逻辑未区分设备
   你的点击事件逻辑是“一刀切”的：不管屏幕大小，点击搜索栏就强制给菜单加移出类。但桌面端的预期应该是——如果菜单是被激活滑入的，就滑回原位；如果本来就是默认显示的，就保持不变，而不是直接把它移走。

两种可行的解决方案 #

方案1：修改CSS，让移出类在桌面端失效

直接在桌面端的媒体查询里覆盖移出类的样式，让它回到初始显示状态：

@media (min-width: 769px) {
  /* 保留你原有的桌面端菜单样式 */
  .rightMenu {
    right: 0;
    width: 300px;
  }
  
  /* 添加以下规则，覆盖移出类的行为 */
  .rightMenu.rightMenuOut {
    right: 0; /* 回到默认显示位置 */
  }
  
  .leftMenu.leftMenuOut {
    left: 0; /* 左侧菜单同理，如果桌面端默认显示的话 */
  }
}

方案2：优化JS逻辑，根据屏幕尺寸执行不同操作

在点击事件里判断当前屏幕宽度，只在移动端执行移出操作，桌面端则仅关闭激活的菜单：

const searchBar = document.querySelector('.searchBar');
const leftMenu = document.querySelector('.leftMenu');
const rightMenu = document.querySelector('.rightMenu');

searchBar.addEventListener('click', () => {
  const isMobile = window.innerWidth <= 768;
  
  if (isMobile) {
    // 移动端：让菜单滑回屏幕外的初始位置
    leftMenu.classList.add('leftMenuOut');
    rightMenu.classList.add('rightMenuOut');
    // 记得移除激活类，避免样式冲突
    leftMenu.classList.remove('leftMenuActive');
    rightMenu.classList.remove('rightMenuActive');
  } else {
    // 桌面端：仅移除激活状态，回到默认显示
    leftMenu.classList.remove('leftMenuActive');
    rightMenu.classList.remove('rightMenuActive');
  }
});

小提示 #

建议你把菜单的“激活”和“移出”状态的类做互斥处理，比如激活时添加xxxActive类并移除xxxOut类，关闭时则相反，这样能避免样式叠加导致的异常。

内容的提问来源于stack exchange，提问作者Jean-Pierre64