个人中心
gpt4 book ai didi

javascript - 折叠的导航栏下拉时如何更改背景颜色？

转载 作者：行者123 更新时间：2023-11-28 02:21:26 25 4
gpt4 key购买 nike

这是我第一次使用 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/

25 4 0
文章推荐： javascript - 如何在通过 Ajax 加载的文件内容上使用 xpath？
文章推荐： html - 获取具有相同名称的多个表单值( bool 大小写)
文章推荐： html - 在 NodejS 中创建包含链接的二维码
文章推荐： html - 在列中显示照片的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com