为什么我的切换按钮无法使用 Javascript 打开我的响应式菜单？

Question

我希望在单击第一个 ul 中的汉堡菜单时打开 nav 菜单。我使用 JavaScript 来定位第二个 ul 中的 nav-list 类，但是当我点击时，什么也没有发生。

我最初在一个列表中拥有汉堡包图标和链接，并尝试使用display: none 处理除第一个 li 项目之外的所有内容，但我意识到我无法让 getElementsByClassName 在点击时显示其余的 li 项目。

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navList = document.getElementsByClassName('nav-list')[0]

toggleButton.addEventListener('click', () => {
  navList.classList.toggle('active')
})

/* Nav Styling */

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
  font-size: 18px;
}

.navbar-links li {
  list-style-type: none;
}

.navbar-links li a {
  text-decoration: none;
  color: whitesmoke;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover {
  background-color: #555;
}

.nav-icon li {
  display: none;
}


/* When menu icon clicked, javascript shows nav items */

@media screen and (max-width: 740px) {
  /* Responsive Navbar */
  .nav-icon li {
    display: block;
  }
  .nav-list li {
    display: none;
  }
  .nav-list ul {
    flex-direction: column;
    width: 100%;
  }
  .nav-list li {
    text-align: center;
  }
  .nav-list li a {
    padding: .5 rem 1 rem;
  }
  /* For Javascript */
  .nav-list.active {
    display: flex;
    flex-direction: column;
  }
}

<nav class="navbar">
  <div class="navbar-links">
    <ul class="nav-icon" id="nav-icon">
      <li>
        <a href="#" class="toggle-button">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
    <ul class="nav-list">
      <li><a href="index.html">HOME</a></li>
      <li><a href="activities.html">SELF-HELP TOOLS</a></li>
      <li><a href="conditions.html">CONDITIONS</a></li>
      <li><a href="resources.html">RESOURCES</a></li>
      <li>
        <a href="contacts.html">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

这就是你想要的吗：当你点击菜单图标（这里给出为A）时，列表配置会在随后的点击中逐行更改。

那么你应该（不仅仅是因为上面说的）而是display: none在nav-list而不是nav-list li，因为在你的JavaScript中function你是togglingactive在nav-list而不是@987654329 @.

更改 CSS 或更改 JavaScript 函数由您决定

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navList = document.getElementsByClassName('nav-list')[0]

toggleButton.addEventListener('click', () => {
  navList.classList.toggle('active')
})

/* Nav Styling */

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
  font-size: 18px;
}

.navbar-links li {
  list-style-type: none;
}

.navbar-links li a {
  text-decoration: none;
  color: lightblue;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover {
  background-color: #555;
}

.nav-icon li {
  display: none;
}


/* When menu icon clicked, javascript shows nav items */

@media screen and (max-width: 740px) {
  /* Responsive Navbar */
  .nav-icon li {
    display: block;
  }
  .nav-list {
    display: none;
  }
  .nav-list ul {
    flex-direction: column;
    width: 100%;
  }
  .nav-list li {
    text-align: center;
  }
  .nav-list li a {
    padding: .5 rem 1 rem;
  }
  /* For Javascript */
  .nav-list.active {
    display: flex;
    flex-direction: column;
  }
}

<nav class="navbar">
  <div class="navbar-links">
    <ul class="nav-icon" id="nav-icon">
      <li>
        <a href="#" class="toggle-button">
          <i class="fa fa-bars">A</i>
        </a>
      </li>
    </ul>
    <ul class="nav-list">
      <li><a href="index.html">HOME</a></li>
      <li><a href="activities.html">SELF-HELP TOOLS</a></li>
      <li><a href="conditions.html">CONDITIONS</a></li>
      <li><a href="resources.html">RESOURCES</a></li>
      <li>
        <a href="contacts.html">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>