点击后汉堡下拉菜单消失问题求助

我已经尝试了所有能想到的解决方法，但点击汉堡按钮后，下拉菜单还是会立刻消失。我参考了WebDevSimplified的汉堡菜单教程。

我的代码如下： #

CSS

:root {
        --bar-width: 60px;
        --bar-height: 8px;
        --hamburger-gap: 6px;
        --foreground: #333;
        --background: white;
        --hamburger-margin: 125px;
        --animation-timing: 200ms ease-in-out;
        --hamburger-height: calc(var(--bar-height)*3+var(--hamburger-gap)*2)
    }

    .hamburger-menu {
        --x-width: calc(var(--hamburger-height)*1.41421356237);
        display: flex;
        flex-direction: column;
        gap: var(--hamburger-gap);
        width: max-content;
        position: absolute;
        top: var(--hamburger-margin);
        left: var(--hamburger-margin);
        z-index: 999;
        cursor: pointer;
    }

    .hamburger-menu::before,
    .hamburger-menu::after,
    .hamburger-menu input {
        content: "";
        width: var(--bar-width);
        height: var(--bar-height);
        background-color: var(--foreground);
        border-radius: 999px;
        transform-origin: left center;
        transition: opacity var(--animation-timing), width var(--animation-timing);
    }

    .hamburger-menu input {
        appearance: none;
        padding: 0;
        margin: 0;
        outline: none;
        pointer-events: none;
    }

    .hamburger-menu:has(input:checked)::before {
        rotate: 45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height)/-2);
    }

    .hamburger-menu:has(input:checked)::after {
        rotate: -45deg;
        width: var(--x-width);
        translate: 0 calc(var(--bar-height)/2);
    }

    .hamburger-menu input:checked {
        opacity: 0;
        width: 0;
    }

HTML

<div class="nav-items">
                <label class="hamburger-menu">
                    <input type="checkbox">
                </label>
</div>

问题分析与修复步骤 #

1. 核心缺失：没有下拉菜单的DOM结构
   你的代码里只有汉堡按钮的触发控件，完全没有实际要显示的下拉菜单内容。先补上菜单容器：

   <div class="nav-items">
     <label class="hamburger-menu">
       <input type="checkbox">
     </label>
     <!-- 添加下拉菜单 -->
     <div class="dropdown-menu">
       <a href="#">首页</a>
       <a href="#">关于我们</a>
       <a href="#">联系我们</a>
     </div>
   </div>
   

2. 添加菜单显示/隐藏的CSS逻辑
   利用:has()选择器关联checkbox状态，控制菜单的显示：

   /* 默认隐藏菜单 */
   .dropdown-menu {
     position: absolute;
     top: calc(var(--hamburger-margin) + var(--hamburger-height) + 10px);
     left: var(--hamburger-margin);
     background: var(--background);
     padding: 1rem;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--animation-timing), visibility var(--animation-timing);
     z-index: 998;
   }
   
   /* 选中checkbox时显示菜单 */
   .hamburger-menu:has(input:checked) + .dropdown-menu {
     opacity: 1;
     visibility: visible;
   }
   

3. 解决点击菜单外部意外关闭的问题
   添加全屏遮罩层，点击遮罩时关闭菜单：

   <div class="nav-items">
     <label class="hamburger-menu">
       <input type="checkbox">
     </label>
     <div class="dropdown-menu">
       <a href="#">首页</a>
       <a href="#">关于我们</a>
       <a href="#">联系我们</a>
     </div>
     <!-- 遮罩层 -->
     <div class="menu-overlay"></div>
   </div>
   

   .menu-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.5);
     opacity: 0;
     visibility: hidden;
     transition: opacity var(--animation-timing), visibility var(--animation-timing);
     z-index: 997;
   }
   
   .hamburger-menu:has(input:checked) ~ .menu-overlay {
     opacity: 1;
     visibility: visible;
   }
   

   加上JS逻辑：

   document.querySelector('.menu-overlay').addEventListener('click', () => {
     document.querySelector('.hamburger-menu input').checked = false;
   });
   

4. 兼容旧版浏览器（可选）
   如果你的用户还在使用不支持:has()的浏览器，改用JS监听checkbox状态：

   const checkbox = document.querySelector('.hamburger-menu input');
   const menu = document.querySelector('.dropdown-menu');
   const overlay = document.querySelector('.menu-overlay');
   
   checkbox.addEventListener('change', () => {
     menu.classList.toggle('active', checkbox.checked);
     overlay.classList.toggle('active', checkbox.checked);
   });
   
   overlay.addEventListener('click', () => checkbox.checked = false);
   

   对应的CSS修改为：

   .dropdown-menu.active, .menu-overlay.active {
     opacity: 1;
     visibility: visible;
   }
   

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