当前位置： 文江博客话题详情

更改切换上的下拉下背景颜色

发布于 2025-01-27 16:27:45 字数 5709 浏览 4 评论 0原文

我正在尝试做到这一点，以便我的下拉菜单在切换后获得背景颜色。正如您在演示中看到的那样，下拉内容与后面的文本混合在一起。我有一个滚动条，可为导航提供，因此下拉菜单在向下滚动时是背景颜色。我可以删除卷轴，但我想要它在其他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/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
</body>

</html>

原文

I am trying to make it so that my dropdown menu gets a background color when its toggled. As you can see in the demo, the dropdown content get mixed up with the text that's behind. I have a scrollspy that gives the nav and thus the dropdown menu a background color when you scroll down. I could remove the scrollspy, but I want it in my other HMTLs

<!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/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

奢望 2025-02-03 16:27:45

用以下方式更改您的脚本：

<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>

change your script with this:

<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>
回复 原文
~没有更多了~

关于作者

可遇━不可求

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文