javascript - 响应式导航栏仅适用于我的主页

Question

我正在尝试构建我的第一个完全响应式网站，除此导航栏外，一切都正常运行。导航栏应该有一个“汉堡包”按钮，您按下它然后链接就会弹出。问题是链接只在我的主页上弹出，而不会在我的任何其他页面上弹出。

我尝试将导航栏的 HTML 代码从主页复制到其他页面，所有页面都使用相同的 CSS 代码。我认为问题一定出在 Javascript 中，但我没有足够的 Java 经验，无法自行解决问题。

我还没有真正找到有类似问题的人，所以我自己问这个问题。

这是导航栏的代码:

HTML

<nav>
 <div class="logo">
  <a href="https://www.pwrgear.net"><img src="assets/images/pg-logo-white-250p.png" alt="White    PWRGear Logo" title="Home"</a>
 </div>
 <ul class="nav-links">
  <li><a href="assets/html/order.html">Order</a></li>
  <li><a href="assets/html/reviews.html">Reviews</a></li>
  <li><a href="assets/html/community.html">Community</a></li>
  <li><a href="assets/html/contact.html">Contact</a></li>
  <li><a href="assets/html/about.html">About</a></li>
 </ul>
 <div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
 </div>
</nav>

<script src="assets/js/script.js"></script>

CSS

/* Navigation Bar Start */
nav
{
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #1f1f1f;
}

.nav-links
{
  display: flex;
  justify-content: space-around;
  width: 60%;
  margin-right: 15%;
}

.nav-links a
{
  text-decoration: none;
  color: white;
  font-weight: lighter;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
  font-weight: 300;
  font-style: normal;
}

.nav-links a:hover
{
  color: red;
}

.nav-links li
{
  list-style: none;
}

.burger
{
  display: none;
  cursor: pointer;
}

.burger div
{
  width: 28px;
  height: 2px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width:1024px)
{
  .nav-links
  {
    margin-right: 9%;
  }

  .imageheader
  {
    margin-top: 10%;
  }

  .imagetext
  {
    margin-top: 3%;
  }

  .header2
  {
    margin-top: 1%;
  }

  .subheader
  {
    margin-top: 2%;
    margin-bottom: 1%;
    font-size: 28px;
  }

  .subcontent
  {
    width: 70%;
    margin-left: 15%;
    font-size: 24px;
    margin-top: 1%;
  }
}

@media screen and (max-width:768px)
{
  body
  {
    overflow-x: hidden;
  }
  .nav-links
  {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #1f1f1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .logo
  {
    margin-left: 25%;
  }

  .nav-links li
  {
    opacity: 0;
  }

  .burger
  {
    display: block;
  }

  .imagetext
  {
    margin-top: -6%;
    display: none;
  }

  .subheader
  {
    font-size: 24px;
    margin-top: 7%;
    margin-bottom: 2%;
  }

  .subcontent
  {
    font-size: 18px;
    margin-left: 15%;
    margin-right: 15%;
    font-weight: lighter;
    margin-top: 2%;
  }

  .imageheader
  {
    margin-top: 0%;
    display: none;
  }
}

@media screen and (max-width:375px)
{
  .imagetext
  {
    display: none;
  }

  .imageheader
  {

  }
}

@media screen and (max-width:812px)
{
  .imagetext
  {
    width: 90%;
    margin-left: 10%;
    margin-top: 20%;
  }

  .imageheader
  {
    width: 90%;
    margin-top: 20%;
  }
}

@media screen and (max-width:736px)
{
  .imagetext
  {
    /* display: none; */
    margin-top: 15%;
    width: 90%;
    margin-left: 10%;
  }

  .imageheader
  {
    /* display: none; */
    margin-top: 17%;
    width: 90%;
  }
}

@media screen and (max-width:667px)
{
  .imagetext
  {
    height: 0%;
    width: 90%;
    margin-left: 10%;
  }

  .imageheader
  {
    height: 5%;
    width: 90%;
  }
}

@media screen and (max-width:414px)
{
  .imagetext
  {
    margin-top: -51%;
    width: 90%;
    margin-left: 10%;
    font-size: 14px;
  }

  .imageheader
  {
    margin-top: -25%;
    width: 90%;
    font-size: 24px;
  }
}

@media screen and (min-width:1366px)
{
  .imagetext
  {
    margin-top: 0%;
    width: 50%;
    margin-left: 2%;
  }

  .subheader
  {
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .content1
  {
    width: 33.33%;
    float: left;
  }

  .content2
  {
    width: 33.33%;
    float: left;
  }

  .content3
  {
    width: 33.33%;
    float: left;
  }
}

@media screen and (max-width:1366px)
{
  .contactimage
  {
    opacity: 0%;
  }
}

@media screen and (min-width:1920px)
{
  .subcontent
  {
    width: 80%;
    margin-left: 10%;
    margin-top: 1%;
    margin-bottom: 5%;
  }
}

.nav-active
{
  transform: translateX(0%);
}

.imagetextremove
{
  display: none;
}

@keyframes navLinkFade
{
  from
  {
    opacity: 0;
    transform: translateX(50px);
  }

  to
  {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1
{
  transform: rotate(-45deg) translate(-4px, 4px);
}

.toggle .line2
{
  opacity: 0;
}

.toggle .line3
{
    transform: rotate(45deg) translate(-6px, -6px);
}
/* Navigation Bar End */

JS

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  const imageHeader = document.querySelector('.imageheader');
  const imageText = document.querySelector('.imagetext');

  burger.addEventListener('click', () => {
    //Toggle Nav
    nav.classList.toggle('nav-active');

    //Toggle Image Text
    imageHeader.classList.toggle('imagetextremove');
    imageText.classList.toggle('imagetextremove');

    //Animate Links
    navLinks.forEach((link, index) => {
        if (link.style.animation) {
          link.style.animation = ``;
        } else {
          link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.4}s`
        }

    //Burger Animation
    burger.classList.toggle('toggle');
    });
  });

}

navSlide();

Answer 1

您是否在其他 html 页面中包含了 script.js？