jQuery和CSS：侧边栏应该在不影响主要区域的情况下，将flexbox内容推到上面

我需要一个特殊的导航网站。到目前为止，我使用了HTML、CSS和jQuery。这是我的代码：

$（“.left_按钮”）。单击（函数（）{
$（“.left”）.toggleClass（“left_之后”）；
});
$（“.right_按钮”）。单击（函数（）{
$（“.right”）.toggleClass（“右后”）；
});
*{
保证金：0；
填充：0；
颜色：白色；
字体系列：Arial；
游标：默认值；
}
身体{
背景色：rgb（200200200）；
变换：比例（0.8）；
}
.内容{
宽度：100vw；
高度：100vh；
背景颜色：灰色；
显示器：flex；
溢出：隐藏；
盒影：0.20px rgb（0,0,0,0.5）；
}
.侧边栏{
高度：100vh；
显示器：flex；
}
.左{
左边距：-150px；
}
.离开后{
左边距：0；
左：0px；
位置：绝对位置；
}
.对{
右边距：-150px；
}
.马上{
右边距：0；
右：0px；
位置：绝对位置；
}
梅因先生{
宽度：100%；
背景色：红色；
}
.侧边栏内容{
宽度：150px；
背景颜色：蓝色；
高度：100vh；
}
.左按钮，
.右按钮{
宽度：75px；
高度：100vh；
背景颜色：蓝色；
}

下面是一些切换内容。
切换
这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。
切换
下面是一些切换内容。

使用
transition
，
transform
与
translateX
一起使用，而不是在
margin
或
left
/
right
属性上操作
只使用一个
.is active
类，这样您就可以
.removeClass
-以简单的方式将其从两个元素中删除


const$left=$（“.left”）；//将选择器缓存到多次使用的元素
常量$right=$（“.right”）；
$（“.left_按钮”）。打开（“单击”，函数（）{
$left.toggleClass（“处于活动状态”）；
});
$（“.right_按钮”）。在（“单击”，函数（）{
$right.toggleClass（“处于活动状态”）；
});
$（“.main”）。在（“单击”，函数（）{
$left.add（$right.removeClass（“处于活动状态”）；
});
*{
保证金：0；
字体系列：Arial；
框大小：边框框；/*您忘记了这个*/
}
身体{
背景色：rgb（200200200）；
颜色：白色；
变换：比例（0.8）；
}
.内容{
宽度：100vw；
高度：100vh；
背景颜色：灰色；
显示器：flex；
溢出：隐藏；
盒影：0.20px rgb（0,0,0,0.5）；
}
.侧边栏{
高度：100vh；
显示器：flex；
转换：转换0.5s；/*前面的东西很酷*/
}
.left{左边距：-150px；}
.right{右边距：-150px；}
.left.is-active{transform:translateX（150px）；}
.right.is-active{transform:translateX（-150px）；}
梅因先生{
宽度：100%；
背景色：红色；
}
.侧边栏内容{
宽度：150px；
背景颜色：蓝色；
高度：100vh；
}
.左按钮，
.右按钮{
宽度：75px；
高度：100vh；
背景颜色：蓝色；
}

下面是一些切换内容。
切换
这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。这是主要领域。
切换
下面是一些切换内容。