汉堡菜单 - 背景颜色延迟(引导4)

Question

几个月前我开始编码，我几乎完成了一个基本的投资组合网站。

我无法解决的问题是汉堡菜单背景。我已经设法用CSS为菜单提供了背景颜色，但是当单击它时，菜单不会立即变为该颜色。有一个非常短的延迟，但它让我有点沮丧！

如果任何代码混乱，请道歉。欢迎任何建设性的批评！

链接： https://codepen.io/MikeyT24/pen/xrQvxe

.HTML

<nav class="navbar fixed-top navbar-inverse navbar-toggleable-sm opaque-navbar">
<div class="container containernav">
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#myContent" aria-controls="myContent" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand m-0 ">Michael Treeves</h1>
<div class="collapse navbar-collapse" id="myContent">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#portfolio">Portfolio</a>
<a class="nav-item nav-link" href="#contact">Contact</a>
</div> <!--navbar-nav-->
</div> <!--collapse-->
</div> <!--container-->
</nav>

.CSS

/***********************************************************
OPAQUE NAVBAR SECTION
**********************************************************/
.opaque-navbar {
background-color: rgba(0,0,0,0);
height: 50px;
border-bottom: 0px;
transition: background-color 0.5s ease 0s;
}
.opaque-navbar.opaque {
background-color: rgba(100,100,150,0.9);
height: 50px;
transition: background-color 0.5s ease 0s;
}
@media (max-width: 992px) {
.opaque-navbar {
height: 50px;
transition: background-color .5s ease 0s;
}
@media (max-width: 768px){
.collapse {
background-color: rgba(100,100,150,0.9);
}

脚本(不确定是否相关(

* OPAQUE NAVBAR SCRIPT
**********************************************************
*/
// Toggle tranparent navbar when the user scrolls the page
$(window).scroll(function() {
if($(this).scrollTop() > 650)  /*height in pixels when the navbar becomes non opaque*/
{
$('.opaque-navbar').addClass('opaque');
} else {
$('.opaque-navbar').removeClass('opaque');
}
});

非常感谢！

话筒。

Answer 1

打开navbar引导程序.collapse类更改为.collapsing然后.collapse这就是后台应用几秒钟的原因。

请改用.navbar-collapse。

.navbar-collapse {
background-color: rgba(100,100,150,0.9);
}