正确引入script后导航切换菜单的onclick事件仍无法触发问题咨询

你代码存在两处语法错误，直接导致toggleNav函数执行失败：

• 变量拼写错误：你在条件判断内使用了getSiderbarUl调用样式，但实际声明的变量名为getSidebarUl，多写了字母r导致找不到对应变量
• 条件判断语法缺失：else if (toggleNavStatus === true { 行缺少右括号，不符合JS语法规范，直接导致函数解析失败

修正后完整main.js代码 #

let toggleNavStatus = false;

let toggleNav = function() {
  let getSidebar = document.querySelector(".nav-sidebar");
  let getSidebarUl = document.querySelector(".nav-sidebar ul");
  let getSidebarTitle = document.querySelector(".nav-sidebar span");
  let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

  if (toggleNavStatus === false) {
    getSidebarUl.style.visibility = "visible";
    getSidebar.style.width = "272px";
    getSidebarTitle.style.opacity = "0.5";

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      getSidebarLinks[i].style.opacity = "1";
    }

    toggleNavStatus = true;
  } else if (toggleNavStatus === true) {
    getSidebar.style.width = "50px";
    getSidebarTitle.style.opacity = "0";

    let arrayLength = getSidebarLinks.length;
    for (let i = 0; i < arrayLength; i++) {
      getSidebarLinks[i].style.opacity = "0";
    }

    getSidebarUl.style.visibility = "hidden";
    toggleNavStatus = false;
  }
}

额外优化说明：原代码中侧边栏收起时给标题设置的opacity为0.5，实际收起后标题应该完全隐藏，这里统一调整为0，你可以根据视觉需求自行修改

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