带有 classList.toggle 的复选框不会切换类。没有显示错误

Question

我有一个复选框，它应该触发菜单从屏幕左侧滑入。问题是当我将菜单隐藏在左侧时，我无法使该功能正常工作。当我单击复选框图标时，它的动画工作但没有其他任何反应。菜单仍然隐藏，我没有收到任何错误。

这是我的代码的 sn-p：

function showMenuSlider() {
  var slider = document.querySelector(".menu-slider");
  slider.classList.toggle("menu-slider-show");

  var sliderOpacity = document.querySelector(".menu-slider-opacity");
  sliderOpacity.classList.toggle("menu-slider-opacity-show")
}

* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Open Sans;
  line-height: 1.6;
  display: block;
}

html {
  scroll-behavior: smooth;
}

main {
  position: relative;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 95;
  box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}

.header-container {
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header-upbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  z-index: 50;
  background-color: white;
  width: 100%;
  margin-top: 9px;
}

.header-upbar p {
  font-size: 16px;
  font-weight: 500;
  color: grey;
}

.header-upbar-item2,
.header-upbar-item3 {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.header-upbar a {
  text-decoration: none;
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 8px;
  border-bottom: 0.5px solid grey;
}

.header-upbar a:first-of-type {
  border-right: 0.5px solid grey;
}

.header-upbar-item2 img {
  height: 23px;
  margin-right: 6px;
}

.header-upbar-item3 img {
  height: 23px;
  margin: 0px 6px 0px 0px;
}

.header-downbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  z-index: 51;
  background-color: white;
}

.header-downbar-logo {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.header-downbar-logo img {
  margin: 18px 18px 18px 18px;
  height: 30px;
}

.header-downbar-menu {
  height: 40px;
  width: 40px;
  display: block;
  position: fixed;
  margin: 15px 18px 15px 18px;
  z-index: 502;
  right: 5px;
  top: 50px;
  z-index: 100;
}

#menu {
  display: none;
}

.icon {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  position: relative;
}

.icon .menu,
.icon .menu::before,
.icon .menu::after {
  content: '';
  background-color: rgba(50, 50, 50, 1);
  display: block;
  position: absolute;
  height: 4px;
  width: 35px;
  transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}

.menu {
  top: 17.5px;
}

.menu::before {
  top: 12px;
}

.menu::after {
  top: -12px;
}

#menu:checked+.menu {
  background: transparent;
}

#menu:checked+.menu::before {
  transform: rotate(45deg);
}

#menu:checked+.menu::after {
  transform: rotate(-45deg);
}

#menu:checked+.menu::before,
#menu:checked+.menu::after {
  top: 0;
  transition: top ease 0.3s, transform ease 0.3s 0.3s;
}

.menu-slider-opacity {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 98;
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
}

.menu-slider {
  width: 200px;
  height: 100vh;
  background-color: white;
  z-index: 99;
  position: absolute;
  ;
  top: 0;
  left: -100%;
  display: block;
}

.menu-slider-show {
  left: 0;
}

.menu-slider-opacity-show {
  left: 0;
}

<div class="header-downbar-menu" onclick="showMenuSlider()">
  <label for="menu" class="icon"><input type="checkbox" id="menu">
            <div class="menu"></div>
        </label>
</div>

<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>

<header id="header">
  <div class="header-container">
    <div class="header-upbar">
      <a href="mailto: ">
        <div class="header-upbar-item2">
          <img src="img/Fenix-e-mail-icon-white.png" alt="">
          <p>blablablabla@o2.pl</p>
        </div>
      </a>
      <a href="tel: ">
        <div class="header-upbar-item3">
          <img src="img/Fenix-phone-icon-white.png" alt="">
          <p>+48 999 999 999</p>
        </div>
      </a>
    </div>
    <div class="header-downbar">
      <div class="header-downbar-logo">
        <img src="img/Fenix-logo-black.png" alt="">
      </div>
    </div>
  </div>
</header>

按钮在标题之外，因为我需要它位于菜单后面的黑暗不透明度之上。以后我会给它做一个漂亮的白色圆形背景，这样它就不会看不见了。

当然，如果您知道更好的方法，请成为我的客人。我为此苦苦挣扎了一段时间......

Answer 1

问题是您在header-downbar-menu 而不是复选框上添加了 onclick 处理程序。因此，当单击复选框时，您还单击header-downbar-menu，因此事件被触发两次。所以这个类被切换了两次（同时添加/删除......几乎:)）

在输入上添加点击事件。 （您可以使用 onchange 事件而不是 click 事件来检查已选中或未选中的状态，这可能会对您有所帮助）

function showMenuSlider() {
  var slider = document.querySelector(".menu-slider");
  slider.classList.toggle("menu-slider-show");

  var sliderOpacity = document.querySelector(".menu-slider-opacity");
  sliderOpacity.classList.toggle("menu-slider-opacity-show")
}

html {
  scroll-behavior: smooth;
}

main {
  position: relative;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 95;
  box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}

.header-container {
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header-upbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  z-index: 50;
  background-color: white;
  width: 100%;
  margin-top: 9px;
}

.header-upbar p {
  font-size: 16px;
  font-weight: 500;
  color: grey;
}

.header-upbar-item2,
.header-upbar-item3 {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.header-upbar a {
  text-decoration: none;
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 8px;
  border-bottom: 0.5px solid grey;
}

.header-upbar a:first-of-type {
  border-right: 0.5px solid grey;
}

.header-upbar-item2 img {
  height: 23px;
  margin-right: 6px;
}

.header-upbar-item3 img {
  height: 23px;
  margin: 0px 6px 0px 0px;
}

.header-downbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  z-index: 51;
  background-color: white;
}

.header-downbar-logo {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.header-downbar-logo img {
  margin: 18px 18px 18px 18px;
  height: 30px;
}

.header-downbar-menu {
  height: 40px;
  width: 40px;
  display: block;
  position: fixed;
  margin: 15px 18px 15px 18px;
  z-index: 502;
  right: 5px;
  top: 50px;
  z-index: 100;
}

#menu {
  display: none;
}

.icon {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  position: relative;
}

.icon .menu,
.icon .menu::before,
.icon .menu::after {
  content: '';
  background-color: rgba(50, 50, 50, 1);
  display: block;
  position: absolute;
  height: 4px;
  width: 35px;
  transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}

.menu {
  top: 17.5px;
}

.menu::before {
  top: 12px;
}

.menu::after {
  top: -12px;
}

#menu:checked+.menu {
  background: transparent;
}

#menu:checked+.menu::before {
  transform: rotate(45deg);
}

#menu:checked+.menu::after {
  transform: rotate(-45deg);
}

#menu:checked+.menu::before,
#menu:checked+.menu::after {
  top: 0;
  transition: top ease 0.3s, transform ease 0.3s 0.3s;
}

.menu-slider-opacity {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 98;
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
}

.menu-slider {
  width: 200px;
  height: 100vh;
  background-color: white;
  z-index: 99;
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
}

.menu-slider-show {
  left: 0;
}

.menu-slider-opacity-show {
  left: 0;
}

<div class="header-downbar-menu">
  <label for="menu" class="icon"><input type="checkbox" id="menu"  onclick="showMenuSlider()">
            <div class="menu"></div>
        </label>
</div>

<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>

<header id="header">
  <div class="header-container">
    <div class="header-upbar">
      <a href="mailto: ">
        <div class="header-upbar-item2">
          <img src="img/Fenix-e-mail-icon-white.png" alt="">
          <p>blablablabla@o2.pl</p>
        </div>
      </a>
      <a href="tel: ">
        <div class="header-upbar-item3">
          <img src="img/Fenix-phone-icon-white.png" alt="">
          <p>+48 999 999 999</p>
        </div>
      </a>
    </div>
    <div class="header-downbar">
      <div class="header-downbar-logo">
        <img src="img/Fenix-logo-black.png" alt="">
      </div>
    </div>
  </div>
</header>