Javascript 默认情况下折叠的侧栏

我对web应用程序还不熟悉，所以我还不知道HTML、CSS和JS是否足以自己处理问题。我按照一些YT教程创建了可折叠的侧边栏，但我不知道为什么它会作为默认值折叠，并且我无法将其打开。我认为问题在于我不知道我的代码中到底发生了什么。你能告诉我我做错了什么并帮助我理解这应该如何工作吗

HTML:

JS:

---

您可以首先将类

菜单显示
添加到导航栏（id为
#wrapper
），以便在页面加载时显示

<div id="wrapper" class="menuDisplayed">

您应该将类
菜单显示
添加到您的
#包装
。然后它可以默认显示



完整的示例可以在这里找到：
好的，我将告诉您如何实现您想要的（两种方法），然后我将解释您的代码是如何工作的

方法1
在第一个div（
#wrapper
）中，添加类
menuDisplayed
：



方法2
您还可以更改CSS以执行所需操作，并将“菜单显示”设置为默认样式：

在整个代码中将“menuDisplayed”替换为“menuHidden”，这样它在语义上仍然有意义
更新
#侧边栏包装的样式
为宽度指定一个非0的值
#侧栏包装器{
z指数：1；
位置：固定；
宽度：250px；
身高：100%；
溢出y：隐藏；
过渡时间：0.15s；
背景色：var（--黑色）；
字号：1em；
}

现在也更改
#页面内容包装器的样式，以便为侧边栏留出空间：

#页面内容包装器{
宽度：100%；
位置：绝对位置；
填充：15px；
左侧填充：250px；/*在左侧留下250px的空间*/
过渡时间：0.15s；
颜色：黑色；
}

下一步是使关闭的边栏具有正确的样式：
#wrapper.menuHidden#侧栏包装器{
宽度：0；/*id“wrapper”和类“menuHidden”的元素的宽度必须为0*/
}
#wrapper.menuHidden#页面内容包装器{
左填充：unset；/*清除为侧边栏提供空间的属性*/
}


现在我将解释代码的工作原理（在更改侧栏行为之前）：

CSS告诉浏览器带有
侧边栏包装的元素的宽度应该为空（因此加载页面时不会立即显示），但它也指出，当位于另一个元素中时，id为
sidebar wrapper
的元素的宽度应为250px，该元素具有
wrapper
id和
menuDisplayed
类

javascript的神奇之处在于：它告诉浏览器切换id为wrapper的元素的
menuDisplay
类，这会激活CSS样式，使侧边栏的宽度达到250px，它就是这样出现的。再次切换时，
menuDisplayed
类将从id为
wrapper
的元素中删除，侧边栏的宽度将恢复为0

$（“#菜单切换”）.click
使用jQuery为“click”事件添加事件侦听器。当触发此事件时（有人使用
菜单切换单击元素
id），将执行回调函数：

函数（e）{
e、 preventDefault（）；//防止元素的默认行为（如果它是锚点（），它将失去更改页面等功能）
$（“#wrapper”）.toggleClass（“menuDisplayed”）；//切换id为“wrapper”的元素的类“menuDisplayed”
}

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

#sidebar-wrapper .sidebar-header {
    padding: 20px;
    background: var(--black);
}

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: 0.15s;
    color: black;
}

#wrapper.menuDisplayed #sidebar-wrapper{
    width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}

.sidebar-nav{
    padding: 0;
    list-style: none;
}

.sidebar-nav li{
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a{
    display: block;
    text-decoration: none;
    color: var(--gray);
}

.sidebar-nav ul li a {
    font-size: 0.9em;
    display: block;
    color: var(--lightGray)
}

.sidebar-nav li a:hover{
    color: #fff;
    background: var(--gray);
}

.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: var(--deepBlue);
}

$("#menu-toggle").click(function(e){
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
});

<div id="wrapper" class="menuDisplayed">