HTML/CSS 解决方法 menu-toggle 仅适用于第一个元素

Posted 2023-02-15

【中文标题】HTML/CSS 解决方法 menu-toggle 仅适用于第一个元素

【英文标题】：HTML/CSS workaround menu-toggle only works on first elemet

【发布时间】：2021-11-01 00:55:23

【问题描述】：

我正在尝试创建一个页面，一旦单击 div，就会显示所有相关信息。因此，一旦单击联赛，就会显示该联赛的比赛。我正在使用以下解决方法来避免使用 javascript：

CSS：

  #game-info-toggle:checked + #game-menu 
    display:block;
  

html

<% @leagues.each do |league| %>
  <label for="game-info-toggle" class="cursor-pointer">
    <div class="w-1/4">
      <%= league.title %>
    </div>
  </label>
  <input type="checkbox" class="hidden" id="game-info-toggle" />
    <div class="hidden" id="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 %>

我遇到的问题是，这对联赛的第一个实例非常有效，但不适用于以下联赛。

初始状态：

当我点击任何联赛时，只有联赛 1 的比赛会这样显示：

如果我要单独点击每个联赛（此处为联赛 1 和 2），我想要的结果：

【问题讨论】：

ids 应该是唯一的，你有多个相同的 ids。建议你将game-info-toggle和game-menu改为class属性。

将这些作为类属性仍然有效还是我试图实现的仅适用于 id ？

【参考方案1】：

我发现了几个问题：

标签需要与输入具有唯一关联，但您有许多标签和输入具有相同的 id。 修复了 1 中 label 和 input 的唯一关联后，您失去了控制 css 显示游戏的 id 字段。因此，为 css 显示/隐藏控件添加类。

<% @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" id="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 %>

  .hidden 
    display: none;
  

  .cursor-pointer 
    cursor: pointer;
  

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

【讨论】：

我觉得有错字？ League.id 应该是 League_id 吗？它也没有工作。它只是给出了与我最初的结果相同的结果。如果您知道更好的方法来做到这一点，我会全力以赴。

@wayoh22 肯定是league.id，假设League 模型有一个id 字段。我尝试了它并让它工作......让我看看我是否打错了。 Obv 我没有联赛或游戏模型，所以我必须翻译我可用的内容。

@wayoh22 哦，是的，我在将 haml（我用来测试它）转换为 html 时出错了……我已经修复了它，它在这里工作……试试看跨度>