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

Question

我希望在单击第一个 ul 中的汉堡菜单时打开 nav 菜单。我使用 JavaScript 在第二个 ul 中定位 nav-list class 但是当我点击时，没有任何反应。

我最初将汉堡包图标和链接放在一个列表中，并尝试对除第一个 li 项目之外的所有内容使用 display: none，但我意识到我无法使用 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 你是toggling active 在 nav-list 不在 nav-list li .

It is your call either change CSS or change JavaScript function

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>

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

Why doesn't my toggle button open my responsive menu with Javascript?

html

javascript

css

responsive-design