0

我正在尝试制作一个响应式汉堡菜单，但是，我在菜单编码的最后部分遇到了砖墙......

我已经尝试了所有我能想到的尝试。出于某种原因，我对代码所做的调整不会完全消失或出现菜单。

最终调整后，菜单不可见，因为我已指定它不在代码中，但是当我单击菜单按钮时，菜单不会切换。

这是我的代码：

const ul = document.querySelector('.menu ul');

burger.addEventListener('click', () => {
  ul.classList.toggle('change');
});
.menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
}
<div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>

请有任何帮助:')

4

1 回答 1

2

您需要增加菜单的特殊性，因为您已经为无序列表声明了比.change类更特殊的初始样式。

const ul = document.querySelector('.menu ul');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
  ul.classList.toggle('change');
});
.menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.menu ul.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
}
.bar {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
}
<div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>

于 2020-12-05T00:18:49.167 回答