Javascript 引导导航在移动设备中折叠或展开时设置颜色样式的方式

我正在处理引导程序来设计导航栏 好的，我可以在他的初始状态下完美地为桌面或移动设备设计样式

当我试着在他膨胀和崩溃的状态下在移动设备上设计风格时，问题就来了

这里有一个例子，你可以看到，我可以触摸到burguer，甚至UL

但是，如何更改徽标颜色和导航栏背景颜色？？ 其他的都很简单，因为通过jQuery可以得到类

希望有人能帮助我。（使用CSS和JS（带或不带jQuery））

我试过了，但一切都崩溃了

您可以使用：

JS:

CSS:

如果要在动画完成时更改颜色，只需使用

show

而不是

show

和

hidden

而不是

hide

您可以使用：

JS:

CSS:

如果要在动画完成时更改颜色，只需使用

show

而不是

show

和

hidden

而不是

hide

工作顺利，有很多有用的东西。工作顺利，有很多有用的东西。

$('.navbar-toggle').toggle(function () {
  $(".navbar-header").addClass("opened");
  $("#burguer").addClass("opened");
}, function () {
  $(".navbar-header").removeClass("opened");
  $("#burguer").removeClass("opened");
});

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $('.navbar').addClass('mobile-opened');
  $('.navbar-brand').addClass('mobile-opened');
});

$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
  $('.navbar').removeClass('mobile-opened');
  $('.navbar-brand').removeClass('mobile-opened');
});

.navbar.mobile-opened {
  background: blue;
}
.navbar-brand.mobile-opened span {
  color: red;
}