为什么单击 UL 时移动菜单会折叠？-解网

问：

我有一个用 CSS 和 HTML 创建的移动导航菜单，它使用复选框技巧来打开和关闭菜单。我遇到的问题是，当您打开菜单并单击 .menu-content 部分（UL）中的任意位置时，它只会折叠菜单。我无法弄清楚为什么会这样。它应该只在您单击跨度时折叠菜单。这是我的代码笔：https://codepen.io/QuantumCelestial/pen/GRzrGJG.menu-icon

这是我的HTML和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;
  /* 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>

HTML CSS 响应式设计移动开发

我无法从您给定的代码中重现错误。查看如何创建 MWE。从部分运行的示例中，我敢打赌，问题是您的整个 ul 都包裹在标签中，因此点击事件可能会冒泡，而不是注册页面更改。我喜欢一些 css 谜题，但除非别无选择，否则 js 会使这项任务更具可读性和琐碎性。否则，您可能需要对复选框和标签的位置进行更多考虑。如果你做了一个MWE，我很乐意<3

3赞 CBroe 11/7/2023

“我无法弄清楚为什么会发生这种情况” - 因为单击关联的，将切换复选框的状态。由于您将完整菜单嵌套到标签中（包括该 UL），因此单击该 UL 中的任意位置也构成对标签元素的单击。label

答：

0赞 Austin 11/8/2023 #1

感谢CBroe的回答！我的问题是我的整个导航都包裹在标签元素内，我没有意识到的是标签元素在单击时会自动将焦点转移到关联的输入上。因此，我将 label 元素更改为 nav 元素，并将菜单图标的第一个跨度更改为 label，并将其与输入相关联。我的 codepen 已更新，下面是我更新的代码。

.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;
}

<nav class="mobile-nav menu-wrap">
  <input id=“toggle” class="toggler" type="checkbox"/>
  <label for=“toggle” class="menu-icon"> <span class="hamburger"></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>
</nav>

上一个：React Native：当升级到 0.72 时无法通知项目评估监听器

下一个：对整个测试集进行预测

为什么单击 UL 时移动菜单会折叠？

Why is the mobile menu collapsing when I click the UL?

评论