Javascript 向导航栏添加下拉菜单

window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle');
  const menu = document.querySelector('.navigation-bar-menu');

  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })

  const linksWithChild = document.getElementsByClassName('dropdown-btn');

  for (let i = 0; i < linksWithChild.length; i++) {
    linksWithChild[i].addEventListener('click', function() {

      /* Upon clicking, check if any "dropdown-btn" other than the current one contains .active class. 
      If so remove .active class from the button and the dropdown will be hidden due to our style definition */
      for (let j = 0; j < linksWithChild.length; j++) {
        // 'this' refers to current dropdown-btn
        if (linksWithChild[j].classList.contains('active') && linksWithChild[j] !== this) {
          linksWithChild[j].classList.remove('active');
        }
      }
      this.classList.toggle('active');
    });
  }

})

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar {
  background-color: #ffffff;
  padding: 2rem 1rem;
  position: relative;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 10rem;
  display: block;
}

.navigation-bar-toggle {
  padding: 1rem;
  background-color: #ecf0f1;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  font: inherit;
  border-radius: 0.25rem;
}

.navigation-bar-menu {
  flex-direction: column;
  right: 0;
  top: 100%;
  background: #ecf0f1;
  display: none;
  position: absolute;
  width: 100%;
}

.navigation-bar-menu li.active a {
  background-color: #242424;
  color: #ffffff;
  font-weight: 300;
}

.navigation-bar-menu li {
  justify-content: center;
  position: relative;
}

.navigation-bar-menu a {
  text-transform: uppercase;
  padding: 1rem;
  background: #ecf0f1;
  display: inline-block;
  width: 100%;
}

.navigation-bar-dropdown {
  position: absolute;
  width: max-content;
  padding-top: 10px;
}

.has-child .navigation-bar-dropdown {
  display: none;
}

.navigation-bar-menu.open {
  display: flex;
}

@media only screen and (min-width: 700px) {
  /* navigation bar */
  .navigation-bar-toggle {
    display: none;
  }
  .has-child:hover .navigation-bar-dropdown {
    display: flex;
    flex-direction: column;
  }
  .navigation-bar-menu {
    display: flex;
    flex-direction: row;
    position: relative;
    background: none;
    justify-content: end;
    width: auto;
    gap: 1rem;
  }
  .navigation-bar-menu li a {
    border-radius: 0.25rem;
  }
}

@media screen and (max-width: 699px) {
  .has-child .navigation-bar-dropdown {
    position: relative;
    border-left: 2px solid #a5a7a8;
    margin-left: 30px;
  }
  /* show dropdown if the dropdown button has .active class */
  .has-child>a.active+.navigation-bar-dropdown {
    display: block;
  }
}


/* disable click evetns on devices that support hover */

@media screen and (hover: hover) and (pointer: fine) {
  .has-child>a {
    pointer-events: none;
  }
}

<div class="navigation-bar">
  <div class="navigation-item">
    <div class="logo">
      <a href="index.html">
        <img src="/assets/img/logo.jpg" alt="Company Logo">
      </a>
    </div>

    <!-- add .navlink class to every top level <li> tag -->
    <!-- add .has-child class to every .navlink <li> tag that has dropdown -->
    <!-- add .dropdown-btn class to direct <a> tag of .has-child <li> tag -->
    <ul class="navigation-bar-menu">
      <li class="navlink active"><a href="index.html" class="active">Home</a></li>
      <li class="navlink has-child">
        <a href="#" class="dropdown-btn">Services <i class="fa-thin fa-chevron-down"></i></a>
        <ul class="navigation-bar-dropdown">
          <li><a href="#">Managed Print Service</a></li>
          <li><a href="#">Document Management</a></li>
          <li><a href="#">Machine Finance Options</a></li>
          <li><a href="#">Machine Repair & Support</a></li>
        </ul>

      </li>
      <li class="navlink has-child">
        <a href="#" class="dropdown-btn">Products <i class="fa-thin fa-chevron-down"></i></a>
        <ul class="navigation-bar-dropdown">
          <li><a href="#">Machines</a></li>
          <li><a href="#">Ricoh</a></li>
          <li><a href="#">Lexmark</a></li>
          <li><a href="#">Konica Minolta</a></li>
          <li><a href="#">Software</a></li>
          <li><a href="#">Kofax</a></li>
          <li><a href="#">Papercut</a></li>
          <li><a href="#">Filestar</a></li>
        </ul>
      </li>
      <li class="navlink"><a href="contact.html">Contact Us</a></li>
    </ul>
    <button class="navigation-bar-toggle">
            <i class="fa-light fa-bars"></i>
            Menu
          </button>
  </div>
</div>