为什么点击 UL 时手机菜单会折叠？

Question

我有一个使用 CSS 和 HTML 创建的移动导航菜单，它使用复选框技巧来打开和关闭菜单。我遇到的问题是，当您打开菜单并单击 .menu-content 部分（UL）中的任意位置时，它只会折叠菜单。我不明白为什么会发生这种情况。仅当您单击

.menu-icon

范围时，它才应折叠菜单。 这是我的代码笔：https://codepen.io/QuantumCelestial/pen/GRzrGJG

这是我的 HTML：

.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;
  /* top: -10px; */
  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 + .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 + .menu-icon .hamburger {
  top: 36px;
  left: 0px;
}
/* Rotate lines */
.menu-wrap .toggler:checked + .menu-icon .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Rotate bottom line */
.menu-wrap .toggler:checked + .menu-icon .hamburger::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}
/* Rotate top line */
.menu-wrap .toggler:checked + .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;
  transition: all 15s ease-in;
  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;
  /* transition: all 0.4s ease; */
}
/* 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;
}

<label class="mobile-nav menu-wrap" role="navigation" aria-roledescription="click to expand menu options">
  <input class="toggler" type="checkbox"/>
  <span class="menu-icon"> <span class="hamburger"></span> </span>
  <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>
</label>

Answer 1

感谢@CBroe的回答！ 我的问题是我的整个导航都包含在标签元素内，而我没有意识到标签元素在单击时会自动将焦点转移到关联的输入。