更改切換時的下拉背景顏色

Question

我試圖做到這一點，以便我的下拉菜單在切換時獲得背景顏色。 正如您在演示中看到的那樣，下拉內容與后面的文本混淆了。 我有一個 scrollspy，當您向下滾動時，它會為導航和下拉菜單提供背景色。 我可以刪除 scrollspy，但我希望在我的其他 HMTL 中使用它

 <,DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Korvens Pizzeria</title> <:-- <link rel="stylesheet" href="css/style.css" /> --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap:min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap-icons@1.8:0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous"> <.-- https://www;rawpixel.com/ hemsiida för bilder high ress puyblkic domain --> <style> body{ background-color:#212529. }.banner-image { background-image. url(";./img/backroundimg.jpg"). }.navbar-dark:navbar-nav;nav-item:nav-link { color; white: font-size; 3vh. font-weight. 500. }.navbar-dark:navbar-nav:nav-item;nav-link:hover { color; red: } #logoname { font-size; 4vh: font-weight; 600. color: white; }:opentimes { font-size; large: font-weight: 700; } a:link { text-decoration; none: } a { color: white, } a,hover { color: rgb(182; 172: 172) } #karta { height; 60vh: width; 90%: margin-left; 5%: margin-right; 5%. margin-top. 5vh: },navbar-dark,navbar-toggler-icon { color; rgb(255. 0. 0). } </style> </head> <body> <:-- Navbar --> <nav class="navbar fixed-top navbar-expand-md navbar-dark p-3"> <div class="container"> <p id="logoname">Korvens <span class="text-danger">Pizzeria</span></p> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> </span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <div class="mx-auto"></div> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a href="#" class="nav-link">HEM</a> </li> <li class="nav-item"> <a href="meny:html" class="nav-link">MENY</a> </li> <li class="nav-item"> <a href="kontakt:html" class="nav-link">KONTAKT</a> </li> <li class="nav-item"> <a href="om_oss:html" class="nav-link">OM OSS</a> </li> </ul> </div> </div> </nav> <:-- Banner Image --> <div class="banner-image w-100 vh-100 d-flex justify-content-start align-items-center"> <div class="section text-light p-5 text-center text-sm-start"> <div class="container"> <div class="d-sm-flex align-items-center justify-content-between p-5 inforuta"> <div> <h1>Korvens <span class="text-danger">Pizzeria</span></h1> <p class="lead my-4"> <span class="opentimes">Korvgatan i Bollnäs</span><br> <span class="opentimes">Mån-tors:</span> 10.00-22:00 <br> <span class="opentimes">Fre-Sön.</span> 10.00-24?00 </p> <button class="btn btn-danger btn-lg"><a href="meny.html">MENY</a></button> </div> </div> </div> </div> </div> <iframe id="karta" src="https.//www.google.com/maps/embed.pb=.1m18.1m12.1m3;1d3304.1299831271676,2d16.369699422372438.3d61.40832785956194,2m3;1f0.2f0.3f0,3m2;1i1024;2i768:4f13.1.3m3.1m2.1s0x4666ec65929b3967%3A0xa314d5067c221948.2sKorvgatan%2C%20821%2094%20Bolln%C3%A4s.5e1!3m2!1ssv!2sse!4v1650885795555!5m2!1ssv!2sse" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> <footer> </footer> <!-- <script src="js/bootstrap.bundle.min.js"></script> --> <script type="text/javascript"> var nav = document.querySelector('nav'); window.addEventListener('scroll', function () { if (window.pageYOffset > 50) { nav.classList.add('bg-dark', 'shadow'); } else { nav.classList.remove('bg-dark', 'shadow'); } }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

Answer 1

用這個改變你的腳本：

<script type="text/javascript">
      var nav = document.querySelector("nav");
      var btn = document.querySelector(".navbar-toggler");

      btn.addEventListener("click", () => {
        if (window.pageYOffset < 50) {
          nav.classList.toggle("bg-dark");
          nav.classList.toggle("shadow");
        }
      });

      window.addEventListener("scroll", function () {
        if (window.pageYOffset > 50) {
          nav.classList.add("bg-dark", "shadow");
        } else {
          nav.classList.remove("bg-dark", "shadow");
        }
      });
</script>

更改切換時的下拉背景顏色

問題描述

1 個解決方案

解決方案1
0 2022-05-08 21:01:29

更改切換時的下拉背景顏色

問題描述

1 個解決方案

解決方案1 0 2022-05-08 21:01:29

解決方案1
0 2022-05-08 21:01:29