求助：点击UL元素时移动端菜单自动折叠的原因排查

问题描述 #

用CSS和HTML的checkbox技巧实现移动端导航菜单的展开与收起，但打开菜单后，点击.menu-content（UL元素）区域时菜单会自动折叠，预期仅点击.menu-icon元素时才触发折叠。

问题原因 #

整个.menu-content被包裹在<label>标签内部，而<label>的核心作用是关联对应的checkbox控件——点击<label>内的任何区域都会触发checkbox的状态切换（选中/取消选中），因此点击菜单内容时也会触发checkbox取消选中，导致菜单折叠。

解决方案 #

调整HTML结构，让<label>仅包含触发菜单的图标元素，将checkbox和菜单内容移出<label>，通过for属性关联checkbox与label，确保只有点击图标时才触发状态切换。

修改后的HTML代码 #

<div class="mobile-nav menu-wrap">
  <input id="toggler" class="toggler" type="checkbox"/>
  <label for="toggler" role="navigation" aria-roledescription="click to expand menu options">
    <span class="menu-icon"> <span class="hamburger"></span> </span>
  </label>
  <ul class="menu-content">
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="info.html">Info</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

关键修改点 #

• 给checkbox添加id="toggler"，label通过for="toggler"属性与checkbox关联，保证点击menu-icon时仍能触发菜单状态切换。
• 将checkbox和menu-content都作为.menu-wrap的直接子元素，与label同级，确保原CSS中的兄弟选择器可以正常控制菜单的显示/隐藏。
• 把原label上的menu-wrap类移到外层div，保持CSS选择器的匹配逻辑不变。

调整后的CSS代码 #

.mobile-nav {
  display: revert;
}
/* Rounded corner style for collapsed menu display */
.menu-wrap .menu-icon {
  position: fixed;
  right: -100px;
  top: -100px;
  z-index: 100;
  width: 200px;
  height: 200px;
  background: #26877f;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #26877f, 0 0 0 0 #26877f;
  cursor: pointer;
}
/* Hamburger menu icon (Middle Line) */
.menu-wrap .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #69d2e7;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

/* Create Top and Bottom Lines & move top line up */
.menu-wrap .hamburger::after,
.menu-wrap .hamburger::before {
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #69d2e7;
}
/* Move top line up */
.menu-wrap .hamburger::before {
  top: -10px;
}
/* Move bottom line down */
.menu-wrap .hamburger::after {
  bottom: -10px;
}
/* Remove input checkbox from display */
.menu-wrap .toggler {
  display: none;
}
/* Create expanded view/growing circle effect */
.menu-wrap .toggler:checked + label .menu-icon {
  box-shadow: 0 0 0 100vw #26877f, 0 0 0 100vh #26877f;
  border-radius: 0;
  /* Change toggler box dimensions to fit the X */
  width: 50px;
  height: 50px;
  right: 0;
  top: 0;
}
/* Reposition icon after box dimensions are resized */
.menu-wrap .toggler:checked + label .menu-icon .hamburger {
  top: 36px;
  left: 0px;
}
/* Rotate lines */
.menu-wrap .toggler:checked + label .menu-icon .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Rotate bottom line */
.menu-wrap .toggler:checked + label .menu-icon .hamburger::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
/* Rotate top line */
.menu-wrap .toggler:checked + label .menu-icon .hamburger::before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  opacity: 0; /* Added so one line isn't thicker than the other */
}
/* Styling for expanded menu content */
.menu-wrap .menu-content {
  font-size: 3rem;
  list-style-type: none;
  line-height: 1.6;
  visibility: hidden;
  z-index: 200;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(75%, -150%) scale(0);
  transform: translate(75%, -150%) scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
/* Show menu content when nav is expanded */
.menu-wrap .toggler:checked ~ .menu-content {
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
/* Styling for the nav links */
.menu-wrap a {
  margin-bottom: 1em;
  display: block;
  color: #69d2e7;
  text-decoration: none;
}

注：核心调整了checkbox选中状态下的选择器，从.toggler:checked + .menu-icon改为.toggler:checked + label .menu-icon，匹配新的HTML结构。

效果验证 #

修改完成后，点击.menu-icon区域可以正常展开/折叠菜单，点击.menu-content区域时不会触发checkbox状态变化，菜单保持展开状态，符合预期需求。

内容的提问来源于stack exchange，提问作者Austin