侧边栏无法关闭：点击菜单仅能展开无法收起的代码排查求助

问题根源 #

你代码里的if判断用了赋值运算符=，而非比较运算符===。每次点击时，sidebar.style["width"] = "5vw"会直接把宽度设为5vw，这个表达式的返回值是"5vw"，会被视为true，所以永远执行sidebar.style["width"] = "15vw"，导致侧边栏一直处于展开状态，无法触发收起逻辑。

修正后的基础代码 #

把赋值号改成严格相等的比较号即可：

const menu = document.querySelector(".menu");
const sidebar = document.querySelector(".sidebar");

menu.addEventListener("click", sidebarWidth)

function sidebarWidth(){
    if(sidebar.style["width"] === "5vw"){
        sidebar.style["width"] = "15vw";
    } else {
        sidebar.style["width"] = "5vw"
    }
}

更推荐的优化写法 #

如果侧边栏初始宽度是通过CSS类定义的（而非内联style），sidebar.style.width可能为空，这时候用类切换的方式更健壮，还能轻松添加过渡动画：

1. 先在CSS中定义样式：

.sidebar {
    width: 5vw;
    transition: width 0.3s ease; /* 添加平滑过渡 */
}
.sidebar.expanded {
    width: 15vw;
}

2. 简化JS逻辑：

const menu = document.querySelector(".menu");
const sidebar = document.querySelector(".sidebar");

menu.addEventListener("click", () => {
    sidebar.classList.toggle("expanded");
});

这种方式无需手动判断宽度值，classList.toggle()会自动切换类的存在状态，实现点击展开/收起的效果。

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