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

Question

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

这是我的代码片段：

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>

按钮在 header 之外，因为我需要它位于菜单后面的深色不透明区域之上。以后我会给它做一个漂亮的白色圆角背景，这样它就不会看不见了。

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

Answer 1

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

在输入上添加点击事件。（您可以使用 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>

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

Checkbox with classList.toggle isn't toggling the classes. No errors shown

javascript

css

document

toggle

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

Checkbox with classList.toggle isn't toggling the classes. No errors shown

javascript

css

document

toggle

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