Javascript 垂直导航栏-Onclick功能不工作

当单击该toggleSideBar（）时，函数应该打开，但它不起作用。我将把代码粘贴到下面。我不知道问题出在哪里。我认为JS部分很好。请告诉我问题所在。在过去的两个小时里，我一直在努力解决这个问题。但问题出在哪里呢

函数切换边栏（）{
document.getElementById（'sidebar'）.classList.toggle（'active'）；
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
img{
位置：相对位置；
顶部：30px；
左：68px；
}
#边栏{
位置：固定；
宽度：250px；
高度：100vh；
背景色：浅绿色；
左：-250px；
}
#边栏。切换btn{
位置：绝对位置；
左：270px；
顶部：20px；
光标：指针；
}
#侧栏。切换btn范围{
显示：块；
宽度：30px；
高度：5px；
背景：#000；
边缘底部：5px；
}
#侧边栏，激活{
左：0px；
}
保险商实验室{
宽度：100%；
边缘顶部：50px；
}
李{
列表样式：无；
填充：20px 70px；
边框底部：1px纯色仿古白色；
文本对齐：居中；
}
a{
文字装饰：无；
颜色：丽贝卡紫；
字体系列：“roboto”；
字号：1.2rem；
文本转换：大写；
字号：900；
}

垂直导航栏

您的问题在于：

#sidebar .active {
  left: 0px;
}

在

#sidebar

和

.active

之间留有空格，意味着您在id为

sidebar

的元素内以类为

active

的元素为目标。相反，您需要将id

侧栏和class
活动的元素作为目标。要使类
处于活动状态
和id
侧栏
以元素为目标，需要删除空格：

#sidebar.active {
  left: 0px;
}

请参见下面的工作示例：


函数切换边栏（）{
document.getElementById（'sidebar'）.classList.toggle（'active'）；
}
*{
保证金：0；
填充：0；
框大小：边框框；
}
img{
位置：相对位置；
顶部：30px；
左：68px；
}
#边栏{
位置：固定；
宽度：250px；
高度：100vh；
背景色：浅绿色；
左：-250px；
}
#边栏。切换btn{
位置：绝对位置；
左：270px；
顶部：20px；
光标：指针；
}
#侧栏。切换btn范围{
显示：块；
宽度：30px；
高度：5px；
背景：#000；
边缘底部：5px；
}
#sidebar.active{/*删除此行的空格*/
左：0px；
}
保险商实验室{
宽度：100%；
边缘顶部：50px；
}
李{
列表样式：无；
填充：20px 70px；
边框底部：1px纯色仿古白色；
文本对齐：居中；
}
a{
文字装饰：无；
颜色：丽贝卡紫；
字体系列：“roboto”；
字号：1.2rem；
文本转换：大写；
字号：900；
}

垂直导航栏