如何修改CSS实现通用侧边导航下拉菜单（无需重复定义ID）

核心思路 #

放弃通过唯一ID绑定label和checkbox的方式，改用类选择器统一控制所有导航项，利用CSS的:checked伪类和相邻兄弟选择器，实现单个样式适配所有动态生成的分类菜单。

修改后的代码示例 #

HTML结构（后端动态循环生成）

每个导航项结构完全一致，无需单独定义ID：

<div class="sidebar-nav-item">
  <input type="checkbox" class="nav-toggle">
  <label class="nav-title">分类标题1</label>
  <ul class="nav-submenu">
    <li><a href="/category/1">子分类1</a></li>
    <li><a href="/category/2">子分类2</a></li>
  </ul>
</div>

<div class="sidebar-nav-item">
  <input type="checkbox" class="nav-toggle">
  <label class="nav-title">分类标题2</label>
  <ul class="nav-submenu">
    <li><a href="/category/3">子分类3</a></li>
  </ul>
</div>

通用CSS样式

仅需一套样式即可适配所有导航项：

/* 隐藏原生checkbox */
.nav-toggle {
  display: none;
}

/* 导航标题样式，模拟按钮点击感 */
.nav-title {
  display: block;
  padding: 10px 15px;
  background: #f5f5f5;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.nav-title:hover {
  background: #e5e5e5;
}

/* 默认隐藏子菜单 */
.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

/* 当checkbox被选中时，展开对应子菜单 */
.nav-toggle:checked + .nav-title + .nav-submenu {
  max-height: 500px; /* 根据子项数量调整，足够容纳所有子内容即可 */
}

.nav-submenu li a {
  display: block;
  padding: 8px 15px;
  color: #333;
  text-decoration: none;
}

.nav-submenu li a:hover {
  color: #007bff;
}

方案优势 #

1. 无需唯一ID：所有导航项使用相同类名，后端动态生成时只需循环输出相同结构，不用为每个分类生成新ID。
2. 样式复用：一套CSS控制所有导航项的显示、隐藏、交互效果，避免重复代码。
3. 兼容性良好：:checked伪类和相邻兄弟选择器支持所有现代浏览器，包括IE9及以上。

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