Question

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

当我尝试在移动设备的扩展和折叠状态下设置样式时出现问题。

这是一个Codepen示例，您可以在其中查看和示例我可以触摸burguer甚至是UL。

但是，我如何更改徽标颜色和导航栏背景颜色？其他很简单，因为通过jQuery获得了课程。

希望有人可以帮助我。（使用CSS＆amp; 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

在移动设备中折叠或展开时，引导NAV方式来设置颜色

1 个答案:

的 CODEPEN