JavaScript实现小屏幕导航菜单显示隐藏功能异常求助

你的代码存在3个核心疏漏，导致菜单无法正常隐藏和显示，修复方案和原理如下：

问题排查&修复步骤 #

• CSS自定义变量未声明：你代码中用到的--white、--primary-500、--transition三个CSS自定义变量没有全局声明，导致移动端样式失效，菜单不会默认隐藏。
  解决方法：在CSS代码最顶部添加变量声明，可自行调整参数：

  :root {
    --white: #ffffff;
    --primary-500: #f44336;
    --transition: all 0.5s ease;
  }
  

• JS执行顺序错误：如果你的JS代码放在<head>标签内，会在页面DOM元素加载完成前执行，document.getElementById("navLinks")无法获取到对应的菜单元素，导致功能失效。
  解决方法：把JS代码放到</body>标签之前，或者修改为DOM加载完成后再执行的写法：

  document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.getElementById("navLinks");
    // 把方法挂载到window上，保证html的onclick事件可以触发
    window.showMenu = () => navLinks.style.right = "0";
    window.hideMenu = () => navLinks.style.right = "-200px";
  })
  

• 未引入Font Awesome图标库：代码中的菜单、关闭图标依赖Font Awesome库，未引入的话图标不会显示，无法点击触发开关功能。
  解决方法：在HTML的<head>标签中引入Font Awesome图标库的官方CSS资源即可。

调试时请将浏览器窗口宽度缩小到992px以下，或者开启浏览器移动端调试模式，才能看到侧边菜单的效果。

实现原理解释 #

整个移动端侧边菜单逻辑非常简单：

1. 屏幕宽度大于992px时，菜单横向正常展示；宽度小于992px时，媒体查询生效，菜单切换为绝对定位，默认right: -200px，即整个菜单被移到屏幕可视区域之外，实现默认隐藏效果。
2. 点击汉堡菜单图标时，触发showMenu函数，将菜单的right属性修改为0，菜单就会从右侧滑入显示。
3. 点击关闭图标时，触发hideMenu函数，将菜单的right属性改回-200px，菜单就会滑出隐藏。
4. CSS中设置的transition属性用来实现滑动过程的平滑过渡动画。

内容的提问来源于stack exchange，提问作者ḞLØҜȈ