移动端使用input:checked ~ ul时下拉菜单无法显示的问题排查

问题描述 #

在max-width:767px的媒体查询下，使用checkbox实现移动端导航展开功能时，nav元素能正常展开，但内部包含li项的ul（id为nav-items）始终无法显示。即使勾选checkbox，开发者工具显示该ul仍处于display:none状态。

核心代码 #

HTML

<body> 
  <header>
    <!-- Logo -->
    <p class="main-logo">STARTUP GROUP</p>            
    <!-- Hamburger icon -->
    <label for="hamburger">&#9776;</label>
    <input type="checkbox" id="hamburger"/>
    <!-- Site Navigation -->
    <nav>
      <ul id="nav-items">
        <li><a href="#">COMPANIES</a></li>
        <li><a href="#">CITY</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">JOBS</a></li>
      </ul>
    </nav>
  </header>
</body>

CSS（媒体查询部分）

@media (max-width: 767px) {
    header {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 2.875em 0.5em;
    }
    nav {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: beige;
        overflow: hidden;
    }
    #nav-items a {
        display: block;
        padding: 30px;
        color: black;
        border-top: 1px solid black;
    }
    #nav-items a:active {
        text-decoration: underline;
    }
    nav {
        max-height: 0;
        transition: max-height .3s ease-out;
    }
    label {
        display: inline-block; 
        color: black;
        font-style: normal;
        font-size: 1.5em;
        cursor: pointer;
    }
    #nav-items,
    #hamburger {
        display: none;
    }
    #hamburger:checked ~ nav {
        max-height: 100%;
    }
    #hamburger:checked ~ #nav-items {
        display: block;
    }
}

问题原因 #

CSS选择器#hamburger:checked ~ #nav-items完全无效，因为CSS相邻兄弟选择器~只能选中与目标元素同级的后续元素。而在DOM结构中，#nav-items是nav的子元素，并非#hamburger的同级元素，所以这条规则永远不会被触发，#nav-items始终保持初始的display:none状态。

解决办法 #

方案1：调整选择器（最小改动） #

修改无效的选择器，通过已生效的#hamburger:checked ~ nav来控制其内部的#nav-items：

/* 替换原有的#hamburger:checked ~ #nav-items规则 */
#hamburger:checked ~ nav #nav-items {
    display: block;
}

方案2：简化逻辑（更优） #

原代码中nav通过max-height:0+overflow:hidden已经能隐藏内部内容，无需额外给#nav-items设置display:none，可以简化代码：

1. 移除#nav-items { display: none; }这条规则
2. 保留#hamburger:checked ~ nav { max-height: 100%; }即可，nav展开后内部的ul会自然显示。

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