汉堡菜单标签按钮需双击显示问题求助

你的问题确实是CSS的checkbox状态控制与jQuery的DOM显示/隐藏逻辑冲突导致的：

• 第一次点击label时，checkbox被勾选，CSS通过:checked选择器触发菜单和遮罩显示
• 点击遮罩#NavDark时，jQuery用hide()给元素加上了display:none，但checkbox的勾选状态并未被取消
• 第二次点击label时，首先会把checkbox从勾选改为未勾选（此时CSS会触发隐藏，但元素已经被jQuery设为不可见，无视觉变化），再点击一次才会重新勾选checkbox触发显示，所以需要双击。

下面提供两种解决方案，任选其一即可：

方案1：纯CSS实现（推荐，无冲突） #

完全去掉jQuery代码，利用checkbox的状态统一控制所有交互逻辑，包括点击遮罩关闭菜单：

修改后代码 #

HTML

<div class="ButtonMenu">
  <input id='toggle' type='checkbox' />
  <label for='toggle' class="menu-trigger">
    <img src="/img/image 8.png" alt="hamburger icon">
  </label>

  <!-- 把遮罩改成label，关联到checkbox，点击自动取消勾选 -->
  <label for='toggle' id="NavDark"></label>
  <div class='MainMenu'>
    {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" class="navbar-item" title="{{ .Name }}">{{ .Name }}</a>
    {{ end }}
  </div>
</div>

CSS

.ButtonMenu #toggle {
  display: none;
}

.ButtonMenu .menu-trigger {
  font-size: 40px;
  color: #000;
  cursor: pointer;
  z-index: 8;
  display: inline-block !important;
}

.MainMenu {
  position: fixed;
  top: 0;
  width: 320px;
  background-color: #222;
  color: #fff;
  transition: all .4s ease;
  overflow-y: auto;
  height: 100vh;
  box-shadow: 0 0 2px #000;
  z-index: 8;
  opacity: 0;
  right: -320px;
  pointer-events: none; /* 未显示时避免菜单内容干扰点击 */
}

#toggle:checked ~ .MainMenu {
  opacity: 1;
  transform: translateX(-100%);
  pointer-events: auto; /* 显示后恢复点击交互 */
}

#NavDark {
  width: 100%;
  right: 0;
  top: 0;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  z-index: -1;
  cursor: pointer;
}

#toggle:checked ~ #NavDark {
  z-index: 7; /* 低于菜单层级，避免遮挡菜单 */
  opacity: 1;
  display: block;
}

方案2：统一用jQuery控制（保留JS逻辑） #

如果需要保留jQuery交互，就去掉所有CSS中:checked相关的选择器，完全用JS控制元素状态：

修改后代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ButtonMenu">
  <label id="menu-trigger">
    <img src="/img/image 8.png" alt="hamburger icon">
  </label>

  <div id="NavDark"></div>
  <div class='MainMenu'>
    {{ range .Site.Menus.main }}
    <a href="{{ .URL }}" class="navbar-item" title="{{ .Name }}">{{ .Name }}</a>
    {{ end }}
  </div>
</div>

CSS

.ButtonMenu #menu-trigger {
  font-size: 40px;
  color: #000;
  cursor: pointer;
  z-index: 8;
  display: inline-block !important;
}

.MainMenu {
  position: fixed;
  top: 0;
  width: 320px;
  background-color: #222;
  color: #fff;
  transition: all .4s ease;
  overflow-y: auto;
  height: 100vh;
  box-shadow: 0 0 2px #000;
  z-index: 8;
  opacity: 0;
  right: -320px;
  display: none;
}

/* 用active类控制显示状态 */
.MainMenu.active {
  opacity: 1;
  transform: translateX(-100%);
  display: block;
}

#NavDark {
  width: 100%;
  right: 0;
  top: 0;
  height: 100vh;
  position: fixed;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  z-index: -1;
  display: none;
}

#NavDark.active {
  z-index: 7;
  opacity: 1;
  display: block;
}

JS

$("#menu-trigger").click(function() {
  $(".MainMenu, #NavDark").toggleClass("active");
});

$("#NavDark").click(function() {
  $(".MainMenu, #NavDark").removeClass("active");
});

内容的提问来源于stack exchange，提问作者Nedjma Média