纯CSS实现的Hamburger Menu点击checkbox后菜单不显示问题排查

核心原因是CSS通用兄弟选择器~的匹配规则限制：
#btn-chk:checked ~ #menulist 这个选择器要求#menulist必须是#btn-chk的同级后继节点，也就是两个元素要在同一个父元素下，且#btn-chk的DOM书写顺序在#menulist之前，选择器才能匹配到目标元素。
你当前的DOM结构中，#btn-chk和#menulist不满足同级兄弟节点的要求，所以选中checkbox后匹配不到#menulist，display:block的样式自然不会生效。

两种方案二选一即可：

• 方案1：调整DOM结构
  将#btn-chk和#menulist放在同一父元素下，且将#btn-chk的DOM位置写在#menulist之前，示例结构如下：

<header>
  <input type="checkbox" id="btn-chk">
  <label for="btn-chk">☰</label>
  <ul id="menulist">
    <!-- 菜单项内容 -->
  </ul>
</header>

调整后原有CSS代码可以直接生效。

• 方案2：调整CSS选择器
  如果不想改动现有DOM结构，可以根据实际的DOM层级修改选择器，保证选择器的匹配逻辑能从处于checked状态的#btn-chk关联到对应的#menulist元素即可。

额外需要注意两点：

• 触发点击的label元素for属性值要和checkbox的id="btn-chk"完全一致，保证点击汉堡图标能正确触发checkbox的选中状态
• checkbox不要被其他元素遮挡，可将z-index设置为较高数值，避免点击事件被拦截。

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