CSS+HTML无JS实现菜单点击展开仅首个元素生效问题求助

安全阿岳

2026-10-6

问题成因

HTML规范要求元素的id属性全局唯一，你在循环渲染所有联赛时，给每个联赛的复选框、赛事菜单都设置了完全相同的固定id，同时label的for属性也都指向同一个固定id。浏览器处理id匹配时只会识别页面中第一个符合的元素，因此不管点击哪个联赛的label，只会触发第一个复选框的选中状态，进而只会展示第一个联赛的赛事菜单。

修复方案

分两步修改代码即可：

1. 调整CSS规则

将原来基于固定id的选择器改为基于类名的选择器，适配所有联赛的通用逻辑：

.game-info-toggle:checked + .game-menu {
  display: block;
}

2. 修改ERB模板代码

给每个联赛的元素动态生成唯一id，同时绑定对应label的for属性：

<% @leagues.each do |league| %>
  <label for="game-info-toggle-<%= league.id %>" class="cursor-pointer">
    <div class="w-1/4">
      <%= league.title %>
    </div>
  </label>
  <input type="checkbox" class="hidden game-info-toggle" id="game-info-toggle-<%= league.id %>" />
  <div class="hidden game-menu">
    <% league.games.each do |game| %>
      <div class="mb-4">
        <h1><%= game.teams %></h1>
        <h1><%= game.assignment.center_referee&.name %></h1>
        <h1><%= game.assignment.assistant_referee_1&.name %></h1>
        <h1><%= game.assignment.assistant_referee_2&.name %></h1>
        <h1><%= game.assignment.fourth_official&.name %></h1>
      </div>
    <% end %>
  </div>
<% end %>