有没有办法使用 CSS 切换复选框输入与另一个元素？

Question

我为我的网站的移动版制作了一个纯 CSS 汉堡菜单，这本来是完美的，但是，它是一个单页网站，菜单上的所有链接都是页面上其他部分的 id。 由于页面不会刷新或打开另一个页面，因此菜单不会关闭。 有谁知道用 CSS 甚至 Javascript 关闭菜单的方法？ 我已经用尽了我所有的资源。

<input type="checkbox" class="burger-toggle" id="burger-toggle">
<label for="burger-toggle" class="burger" id="burger-toggle">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</label>
  <nav class="nav" id="nav">
    <ul class="menu" id="menu">
      <li><a href="#work">Work</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

</header>

CSS

    #burger-toggle:checked ~ nav {
    width: fit-content;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

Answer 1

您可能可以这样做。

document.querySelector('#menu a').addEventListener('click', closeHamburger);

function closeHamburger() {
  document.querySelector('#burger-toggle').checked = false;
}

但是请记住在滥用（出于目的）表单元素时设置aria-hidden="true" 。

Answer 2

我同意@BOZ，但我不认为使用输入是汉堡菜单的正确方法。

那么它应该只出现在移动设备上，所以让我们说宽度768px

您还可以使用 2 个单独的导航，一个用于移动设备，另一个用于大屏幕并使用display: none; 或visibility: hidden;

并使用 css class 在此示例中更改导航的行为 class isopen

 var burger = document.querySelector(".burger"); var nav = document.querySelector(".nav"); var close = document.querySelector(".close"); var screenSize = document.querySelector(".screen__size"); burger.addEventListener("click", function () { nav.classList.add("isopen"); }); close.addEventListener("click", function () { nav.classList.remove("isopen"); }); //This is just for pixel width display window.addEventListener("resize", function () { screenSize.innerHTML = window.innerWidth + "px"; }); window.onload = function () { screenSize.innerHTML = window.innerWidth + "px"; };

 body { display: flex; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; } header { width: 100%; max-width: 1440px; padding: 0 1rem; height: 60px; margin: 0 auto; display: flex; align-items: center; }.nav { margin-left: auto; transition: transform 0.4s ease; }.menu { display: flex; align-items: center; justify-content: center; list-style: none; text-transform: uppercase; font-size: 1.2rem; }.menu li:not(:last-child) { margin-right: 1rem; } button { background: none; outline: none; border: none; cursor: pointer; }.burger { position: absolute; width: 20px; height: 15px; margin-right: auto; visibility: hidden; }.bar { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: black; }.bar:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }.bar:last-child { top: inherit; bottom: 0; }.nav.isopen { transform: translateY(0); }.close { position: absolute; top: 30px; right: 30px; font-size: 2.2rem; visibility: hidden; }.screen__size { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; font-weight: 500; } @media screen and (max-width: 768px) {.burger, .close { visibility: visible; }.nav { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; background-color: lightblue; transform: translateY(-100%); }.nav ul { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; list-style-type: none; }.nav li:not(:last-child) { margin-bottom: 1rem; } }

 <header> <button class="burger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> <nav class="nav"> <button class="close">X</button> <ul class="menu"> <li><a href="#work">Work</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <div class="screen__size"></div>