侧边导航栏点击后无法保持展开，需长按按钮才能维持打开状态

核心问题 #

1. JavaScript逻辑错误：Element.className返回的是类名字符串，不存在toggle方法，切换元素类需要使用Element.classList接口提供的toggle方法。
2. CSS选择器错误：.sidenav:active是CSS原生激活伪类，仅在元素被鼠标按住的短暂时间内生效，和JS逻辑要添加的自定义.active类完全不匹配。

修正后代码 #

JavaScript代码 #

let btn = document.querySelector("#btn");
let sidenav = document.querySelector(".sidenav");
    
btn.onclick = function(){
    sidenav.classList.toggle("active");
}

CSS代码 #

.sidenav{
    position: fixed;
    top: 0;
    left:0;
    height: 100%;
    width: 78px;
    box-shadow: -1px -2px 30px black;
    padding: 6px 14px;
    border: 4px white solid;
    border-radius: 20px;
    transition: all 1s ease;
}
/* 替换伪类为自定义类选择器 */
.sidenav.active{
    width: 240px;
}

效果说明 #

修改完成后，首次点击菜单按钮会给侧边栏添加active类，导航栏保持240px展开状态；再次点击会移除active类，导航栏恢复78px折叠状态，符合预期交互效果。

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