Javascript 移动导航在jQuery中有奇怪的转换，并且没有正确显示

我已经创建了一个模板，在桌面上有一个水平导航，在手机上有一个垂直导航。我正在使用一个导航列表，并将其样式从桌面更改为移动

问题是，我给它的jQuery添加了一些我想删除的奇怪的转换。文本和侧边栏的淡入/淡出以及奇怪的滑入/滑出效果

我试图实现的是使移动导航滑入/滑出时宽度保持不变，没有褪色效果。我认为toggle（）类与此有关，但我不确定

此外，当您打开然后单击汉堡打开然后关闭移动导航，然后转到查看桌面模式时，桌面导航也将消失，直到您刷新页面

任何帮助都会很好。谢谢

$（'.toggle menu'）。单击（函数（）{
$（'nav'）。切换（“nav”）；
});
：根目录{
--黑色：#212121；
--灰色：#ccc；
--浅灰色：#eee；
--灰色不透明度：#ccc，0.2；
--排水沟：30px；
}
html，
身体{
最小高度：100%；
}
html{
框大小：边框框；
背景色：var（--灰色）；
}
身体{
字体系列：“Poppins”，无衬线；
字体大小：14px；
线高：1.3；
颜色：var（黑色）；
保证金：0；
}
a{
文字装饰：无；
颜色：var（--黑色）；
}
a:悬停，
a:焦点{
颜色：var（--黑色）；
}
保险商实验室{
填充：0；
}
ulli{
显示：内联；
列表样式类型：无；
}
.集装箱{
显示：网格；
网格模板列：1fr；
网格模板区域：“页眉”“旁白内容”“概览”“页脚”；
}
.割台蒙皮{
背景色：rgba（255，255，255，0.1）；
}
标题{
网格区域：标题；
显示器：flex；
证明内容：之间的空间；
填充：var（--槽）15px；
最大宽度：1200px；
保证金：0自动；
}
.切换菜单范围{
宽度：20px；
高度：2倍；
利润底部：4倍；
边界半径：50px；
背景：var（--黑色）；
显示：块；
}
@介质（最小宽度：839px）{
.切换菜单{
显示：无；
}
导航ul{
保证金：0；
}
李国荣{
文本转换：大写；
左侧填充：20px；
}
海军ulli a{
位置：相对位置；
}
主动导航{
颜色：var（--黑色）；
字号：700；
}
nav ul li a.活动：：之后{
内容：''；
宽度：100%；
高度：2倍；
显示：块；
位置：绝对位置；
左：0；
底部：-4px；
背景色：var（--黑色）；
}
第N个孩子（4n）{
右边距：200px；
}
}
@介质（最大宽度：840像素）{
导航{
身高：100%；
位置：固定；
背景色：rgba（255，255，255，0.1）；
左：0；
顶部：78px；
宽度：300px；
右边距：-300px；
显示：无；
}
导航ul{
保证金：0；
填充：40px 0 40px；
显示器：flex；
弯曲方向：立柱；
}
李国荣{
文本转换：大写；
填充底部：40px；
}
海军ulli a{
位置：相对位置；
}
主动导航{
颜色：var（--黑色）；
字号：700；
}
nav ul li a.活动：：之后{
内容：''；
宽度：100%；
高度：2倍；
显示：块；
位置：绝对位置；
左：0；
底部：-4px；
背景色：var（--黑色）；
}
第N个孩子（4n）{
右边距：200px；
}
}









您可以在css中执行所需的转换，只需添加/删除要触发的类即可it@Huangismjs添加了一些糟糕的转换，而我没有指定它们。幻灯片操作也应该是从左到右，但目前它是从上到下的。我是说不要使用toggle并在css中定义所需的转换，然后使用js添加/删除类来触发转换