Jquery 在引导中折叠菜单时删除类

当导航栏被扩展时，我不得不添加一个class.bgGradient，因为客户端希望导航栏中有一个图像，而文本不容易辨认。所以我在导航栏后面添加了一个轻微的渐变。但是当它倒塌时，梯度看起来很奇怪，所以我想把它处理掉

只有当导航栏折叠时，才有办法摆脱class.bgGradient吗

.navbar{
余量：-30px 0 15px 0；
}
纳瓦尔先生{
显示器：flex；
证明内容：周围的空间；
}
.导航栏.导航项目.导航链接{
颜色：#FFF；
字体系列：“Helvetica”，无衬线；
字号：600；
字体大小：14px；
显示：内联flex；
填充：0px；
}
.梯度{
背景色：rgba（54203216,0.8）；
盒影：0px 0px 8px 5px#36CBD8；
}
.bgGradient2{
背景色：rgba（161881850.5）；
盒影：0px 0px 10px 5px#10BCB9；
}
.导航栏暗.导航栏导航.导航链接{
颜色：白色；
}
.custom-toggler.navbar-toggler{
边框颜色：rgb（255、255、255、0.5）；
}
.自定义切换器.导航栏切换器图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba（255255255，0.7）'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；
}

引导3导航栏断点位于991px，因此您可以使用媒体查询更改折叠的导航栏

@media screen and (max-width: 991px) {
 .bgGradient {
   background-color: transparent;
   box-shadow: none;
 }

 .bgGradient2 {
   background-color: transparent;
   box-shadow: none;
 }
}

---

当您使用导航栏展开md时，导航栏中的类将使该导航栏在992px的中（md）断点处垂直折叠（并显示切换图标）。但由于某些原因，您的断点实际上在屏幕宽度小于768px时起作用

并去除梯度。您可以使用最小宽度的媒体查询，因此渐变类只能在最小宽度断点之前工作。而且你不需要添加额外的CSS

下面检查CSS第一部分设置媒体查询的最小宽度：768px，因此当设备屏幕小于768px时，渐变类将不起作用

.navbar{
余量：-30px 0 15px 0；
}
纳瓦尔先生{
显示器：flex；
证明内容：周围的空间；
}
.导航栏.导航项目.导航链接{
颜色：#FFF；
字体系列：“Helvetica”，无衬线；
字号：600；
字体大小：14px；
显示：内联flex；
填充：0px；
}
@仅介质屏幕和（最小宽度：768px）{
.梯度{
背景色：rgba（54203216,0.8）；
盒影：0px 0px 8px 5px#36CBD8；
}
.bgGradient2{
背景色：rgba（161881850.5）；
盒影：0px 0px 10px 5px#10BCB9；
}
}
.导航栏暗.导航栏导航.导航链接{
颜色：白色；
}
.custom-toggler.navbar-toggler{
边框颜色：rgb（255、255、255、0.5）；
}
.自定义切换器.导航栏切换器图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba（255255255，0.7）'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；
}