Bootstrap NAV 在移动设备中折叠或展开时设置颜色样式的方法

Question

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

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

这是一个Codepen 示例，您可以在其中看到我可以触摸汉堡甚至 UL 的示例。

但是，如何更改徽标颜色和导航栏背景颜色？ 其他的都很简单，因为通过 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