javascript - 在移动设备中折叠或展开时 Bootstrap 导航颜色样式的方式

Question

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

当我尝试在展开和折叠状态下在移动设备上设置样式时，问题就来了。

这是一个Codepen例如，您可以在哪里看到我可以触摸 burguer 甚至 UL 的示例。

但是，如何更改 Logo 颜色和导航栏背景颜色？？其他的很容易，因为有通过 jQuery 上课。

希望有人能帮助我。 (使用 CSS 和 JS(有或没有 jQuery))

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

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

Answer 1

您可以使用 Bootstrap events on collapse :

JS:

$('#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');
});

CSS:

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

如果你想在动画完成时改变颜色，只需使用 shown 而不是 show 和 hidden 而不是 hide

CODEPEN