有沒有辦法使用 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>