在 Javascript (HTML/CSS/Javascript) 中触发点击功能时，CSS 可见性属性不会切换答案

【问题标题】：Css visibility property will not toggle when click function triggered in Javascript (HTML/CSS/Javascript)在 Javascript (HTML/CSS/Javascript) 中触发点击功能时，CSS 可见性属性不会切换
【发布时间】：2020-12-04 23:53:24
【问题描述】：

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

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

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

这是我的代码：

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>

请有什么帮助:')

【问题讨论】：

标签： javascript responsive hamburger-menu responsive-navigation

【解决方案1】：

您需要增加菜单的特异性，因为您已经为无序列表声明了比.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>

【讨论】：