我正在处理 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"); });
最佳答案
您可以使用 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
关于javascript - 在移动设备中折叠或展开时 Bootstrap 导航颜色样式的方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35609294/