如何在基于Grid/Flex的简易菜单中实现汉堡菜单点击显隐？能否无需JavaScript？

嘿，这个需求完全可以通过纯CSS实现！核心思路是利用复选框的:checked伪类结合兄弟选择器来控制菜单的显示状态，下面我结合你的现有代码给你完整方案：

步骤1：补充HTML结构 #

首先要在页面里添加一个隐藏的复选框和汉堡按钮的标签（用来触发复选框状态）：

<!-- 隐藏的复选框，用来记录点击状态 -->
<input type="checkbox" id="burger-toggle" class="burger-toggle">
<!-- 汉堡按钮，点击它相当于点击复选框 -->
<label for="burger-toggle" class="burger">☰</label>

<!-- 你原来的菜单结构 -->
<div class="menu">
  <div class="menu-item"></div>
  <div class="menu-item">菜单项1</div>
  <div class="menu-item">菜单项2</div>
  <div class="menu-item">菜单项3</div>
  <div class="menu-item">菜单项4</div>
  <div class="menu-item">菜单项5</div>
  <div class="menu-item"></div>
</div>

步骤2：完善CSS样式 #

基于你提供的CSS，补充以下样式：

/* 隐藏复选框 */
.burger-toggle {
  display: none;
}

/* 你的原有样式 */
.menu {
  display: grid;
  grid-template: auto / auto 3cm 3cm 3cm 3cm 3cm auto;
  background: #444;
}
.menu-item {
  padding: 10px;
  text-align: center;
  color: #fff;
}
.menu-item:hover {
  background: #fff6;
}
.burger {
  display: none;
  padding: 10px;
  background: #444;
  color: #fff;
  cursor: pointer; /* 提示这是可点击的按钮 */
}

/* 移动端适配（以768px为例，可根据需求调整） */
@media (max-width: 768px) {
  /* 汉堡按钮显示 */
  .burger {
    display: block;
  }
  
  /* 菜单默认隐藏，改为垂直排列 */
  .menu {
    grid-template: repeat(5, auto) / 100%;
    display: none;
    gap: 0; /* 去掉网格间距，让菜单更紧凑 */
  }
  
  /* 当复选框被选中时，显示菜单 */
  #burger-toggle:checked ~ .menu {
    display: grid;
  }
}

原理说明 #

• 我们用<label>关联隐藏的<input type="checkbox">，点击汉堡按钮（label）就会切换复选框的选中状态。
• 通过CSS的兄弟选择器~，当复选框处于:checked状态时，控制相邻的.menu元素从display: none变为display: grid，实现菜单的显示/隐藏。
• 媒体查询@media (max-width: 768px)用来控制只有在小屏幕下才启用汉堡菜单逻辑，大屏幕下还是保持你原来的网格布局。

这样就完全不需要JavaScript，纯CSS就能实现汉堡菜单的交互啦！

内容的提问来源于stack exchange，提问作者no one special