这是我第一次使用 Stackoverflow，所以我希望我已经很好地解释了我的问题:
我想在导航栏向下折叠时将其背景颜色更改为白色。即当在较小的屏幕上时，会出现一个按钮，允许您按下显示导航栏内容的操作按钮。目前，我的导航栏背景颜色是透明的，这个主题在导航栏折叠后出现。
仅供引用 - 我正在使用 bootstrap，您可以从我下面的代码中看到这一点。 JS 部分是在您向下滚动页面时将 solid 类添加到我的导航栏上，但这与我的折叠问题无关。
我似乎找不到合适的类来编辑以更改下拉列表背景颜色。
这是我的 HTML(我为多行 lorem ipsum 道歉):
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if ($(this).scrollTop() > 300) {
$('.navbar').addClass('solid'),
$('.navbar-brand').addClass('solid'),
$('.navbar-dark .navbar-nav .nav-link').addClass('solid');
} else {
$('.navbar').removeClass('solid'),
$('.navbar-brand').removeClass('solid'),
$('.navbar-dark .navbar-nav .nav-link').removeClass('solid');
}
});
});@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Oswald);
body {
margin: 0;
}
body {
background-image: -webkit-linear-gradient(top, #ff0060, #ff6975);
background-image: -o-linear-gradient(top, #ff0060 0, #ff6975 100%);
background-image: linear-gradient(180deg, #3c1fbd 0, #1100a8ad);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFF0060", endColorstr="#FFFF6975", GradientType=0);
font-family: Lato, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.58;
color: #555;
background-color: #fff;
}
.white-text-container .fa-icon,
.white-text-container a,
.white-text-container h1,
.white-text-container h2,
.white-text-container h3,
.white-text-container h4,
.white-text-container h5,
.white-text-container p {
color: #fff;
}
.section-container {
padding: 60px 0 40px;
}
.navbar {
height: 55px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
padding: 0rem 3rem !important;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(253, 253, 253) !important;
}
.navbar.solid {
background-color: white;
transition: background-color 1s ease 0s;
box-shadow: 0 0 4px grey;
color: black !important;
}
.navbar .navbar-brand.solid {
color: black;
transition: color 1s ease 0s;
}
.navbar-dark .navbar-nav .nav-link.solid {
color: black !important;
transition: color 1s ease 0s;
}
h1 {
font-size: 60px !important;
margin-top: 25px !important;
margin-bottom: 12.5px !important;
font-family: Oswald, Helvetica, Arial, sans-serif !important;
font-weight: 400 !important;
line-height: 1.1 !important;
color: #000;
font-size: 2em;
margin: .67em 0;
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.fa-icon.fa-icon-2x {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 28px;
}
.fa-icon {
color: #000;
width: 40px;
height: 32px;
display: inline-block;
line-height: 29px;
font-size: 15px;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/cv2.png">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a href="#" class="navbar-brand">Home</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="fa fa-envelope"></i> Contact</a>
</li>
</ul>
</div>
</nav>
<main class="content-wrapper">
<header class="white-text-container section-container">
<div class="text-center">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-block">
<h2>About</h2>
<div class="row">
<div class="col-md-4">
<p><img src="./assets/images/img-01.jpg" class="img-responsive" alt=""></p>
</div>
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>我希望在单击打开按钮时导航栏下拉列表的背景颜色为白色。
最佳答案
请在 css 中尝试此代码..
CSS
@media only screen and (max-width: 575px) {
#navbarMenu {
background-color: #fff;
}
#navbarMenu a {
color: #000 !important;
padding: 7px 15px;
}
.navbar-dark.solid .navbar-toggler span {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark.solid .navbar-toggler {
border-color: #000;
}
关于javascript - 折叠的导航栏下拉时如何更改背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57374660/