移动端全屏侧滑菜单动画适配及隐藏逻辑问题求助

问题背景 #

现有右侧滑出菜单，桌面端固定宽度350px，默认通过right: -350px隐藏；需求是在767px及以下的移动端让菜单占满屏幕宽度，同时保证菜单在不同设备下都能正确显示/隐藏。当前修改后存在移动端菜单初始状态异常、JS逻辑冗余无效的问题。

解决方案 #

1. 优化CSS（通过媒体查询处理响应式） #

直接用CSS媒体查询定义不同屏幕下的菜单初始状态，无需依赖JS设置默认位置：

.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:-350px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
}

/* 移动端适配：767px及以下屏幕 */
@media (max-width: 767px) {
  .menu-general {
    width: 100%;
    right: -100%; /* 用-100%替代固定值，确保完全隐藏 */
  }
}

/* 原有其他CSS样式保持不变 */
.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}

2. 重构JS逻辑（动态计算隐藏位置） #

去掉冗余判断，在点击事件中根据当前屏幕宽度动态确定菜单隐藏时的right值，同时添加窗口尺寸变化监听，确保菜单状态始终正确：

let menuGeneral = $('#menu-general');

// 打开菜单：所有设备统一滑至right: 0
$('#menu-up-control').click(function () {
  menuGeneral.show().animate({ right: '0' }, 500); // 先显示再执行动画，避免隐藏状态下无法触发
});

// 关闭菜单：根据屏幕宽度计算隐藏位置
$('#menu-up-control-close').click(function () {
  let hideRight = $(window).width() > 767 ? '-350px' : '-100%';
  menuGeneral.animate({ right: hideRight }, 500, function () {
    menuGeneral.hide();
  });
});

// 窗口尺寸变化时重置菜单状态，解决桌面端缩放窗口到移动端尺寸的异常
$(window).resize(function() {
  if (menuGeneral.is(':visible')) {
    menuGeneral.stop().animate({ right: '0' }, 0);
  } else {
    let hideRight = $(window).width() > 767 ? '-350px' : '-100%';
    menuGeneral.css('right', hideRight);
  }
});

关键说明 #

• CSS媒体查询直接控制不同设备的菜单初始宽度和隐藏位置，避免JS初始设置的冗余和渲染延迟
• JS动态计算隐藏位置，无需写死固定数值，自动适配当前屏幕尺寸
• 窗口resize监听用于处理桌面端窗口缩放至移动端尺寸的场景，保证菜单状态始终正常

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