为什么我的JS代码无法实现导航列表toggle切换功能？

你的代码共有4处书写错误，直接导致功能不生效，逐一修正即可：

• HTML中列表项的class属性书写错误，nav=item应为nav-item，等号替换为短横，该错误不直接影响切换功能，但属于不符合规范的笔误
• CSS中过渡属性名写错：transform: transform 0.5s ease;一行的属性名应为transition，属性名错误会导致位移动画完全不生效
• CSS选择器书写错误：.header .nav .open是后代选择器，会匹配.nav元素内部class为open的子元素，但open类是直接加在.nav元素本身上的，需要去掉中间的空格，写为.header .nav.open才能正确匹配到展开状态的导航
• JS中类名操作参数错误：classList.toggle()方法传入类名时不需要带类选择器前缀.，你写的toggle(".active")实际会给元素添加名为.active的类，和CSS中定义的.active样式完全无法匹配，去掉参数里的点即可

修复后的HTML代码 #

<button type="button" class="nav-toggler">
    <span></span>
</button>

<!--Navbar-->
<nav class="nav">
    <ul>
        <li class="nav-item"><a href="#home">Home</a></li>
        <li class="nav-item"><a href="#about">About</a></li>
        <li class="nav-item"><a href="#our-menu">Menu</a></li>
        <li class="nav-item"><a href="#testimonials">Testimonials</a></li>
        <li class="nav-item"><a href="#team">Team</a></li>
        <li class="nav-item"><a href="#contact">Contact</a></li>
    </ul>
</nav>

修复后的CSS代码 #

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-toggler.active{
    position: absolute;
    right: 0;
    z-index: 1;
}

.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transition: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav.open{
    transform: translateX(0%);
}

修复后的JavaScript代码 #

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector(".nav").classList.toggle("open");
}

修复完成后点击切换按钮即可正常触发侧边栏滑入滑出、按钮状态切换的效果。如果修复后仍不生效，优先检查.nav和.nav-toggler元素是否都位于class为header的容器内部，避免CSS后代选择器无法匹配到对应元素样式。

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