点击侧边栏按钮无响应：个人网站sidebar宽度切换功能失效求助

我正在制作个人网站，希望实现点击sidebar按钮时切换侧边栏宽度的效果，但该功能目前无法正常工作。我刚自学前端几周，只需要简单提示，不接受复杂改动。

相关代码： #

JavaScript：

const sidebarBut = document.querySelector('.sideBarBut');
sidebarBut.addEventListener('click', animate);

function animate(){
    document.querySelector('.sidebar').style.width = "400px";
}

CSS：

/*--------|--------*/
.sideBarBut {
    transform: scale(0.065);
    background-color: black;
    position: fixed;
    bottom: 742.5px;
    left: -235px;
    cursor: pointer;
}

.sideBarBut:hover {
    filter: brightness(80%);
}

.sidebarTitle {
    color: white;
    position: fixed;
    top: -50px; /*7px*/
    left: 95px;
    font-size: 28px;
    font-family: sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.sidebar {
    z-index: 1000;
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    border-right: 0px solid transparent;
}

.animate {
    animation-play-state: paused;
    animation-name: sidebarOpen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes sidebarOpen {
    0% {
        width: 0;
    }
    100% {
        width: 250px;
        border-right: 2px solid white;
    }
}

@keyframes sidebarClosed {
    0% {
        width: 250px;
    }
    100% {
        width: 0;
        border-right: 0px solid transparent;
    }
}

.projectLinks {
    width: 200px;
    position: fixed;
    top: 40px;
    left: -1000px; /*20px*/
    color: white;
    list-style: none;
    padding-left: 0;
}

.projects {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    font-family: sans-serif;
    line-height: 30px;
}

.projects:hover {
    color: rgb(200, 200, 200);
}

HTML：

<section>
    <div class="sidebar animate">
        <button type="button" class="sideBarBut"><img src="img/sidebar.png"></button>
        <span class="sidebarTitle">Projects</span>
        <ul class="projectLinks">
            <li><a class="projects" href="projects/Tic Tac Toe Project copy/index.html">Tic Tac Toe Project</a></li>
            <li><a class="projects" href="projects/color changer proj/index.html">Color Changer Project</a></li>
        </ul>
    </div>
</section>
<script src="sidebar.js"></script>

简单修复提示： #

• 先解决按钮点击不到的问题：把.sideBarBut的left: -235px改成left: 10px，不然侧边栏宽度为0时按钮在屏幕外，根本点不着。
• 你的JS直接设置行内宽度，和CSS里的动画冲突，而且没法实现切换效果。改成切换类的方式更简单：
  1. 把HTML里sidebar的animate类去掉，默认是关闭状态
  2. 修改JS代码：

     const sidebarBut = document.querySelector('.sideBarBut');
     const sidebar = document.querySelector('.sidebar');
     sidebarBut.addEventListener('click', () => {
       sidebar.classList.toggle('animate');
     });
     

• 把.animate类里的animation-play-state: paused删掉，不然动画不会执行。
• 如果要实现关闭动画，后续可以再加一个closed类，点击时判断当前状态切换不同动画类，但先把基础的开/关做通。

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