Bootstrap NAV在手机中折叠或展开时为颜色设置样式的方式

Question

I'm dealing with bootstrap to style the navbar Ok, i can style perfectly for desktop or mobile in his initial state.

The problem comes when i try to style on mobile in his expanded and collapsed state.

Here is a Codepen example, where you can see and example where i can touch the burguer and even the UL.

But, how can i change the logo color and the navbar background color ?? The others were easy because there got class via jQuery.

Hope someone can help me. ( Using CSS & JS ( with or without jQuery ) )

I try this but everything crashed

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

Answer 1

You can use 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;
}

If you want to change colors when animation is done just use shown instead of show and hidden instead of hide

CODEPEN