Rails应用中如何将find_each生成的列表转为Bootstrap下拉菜单？

你的代码核心问题是把Bootstrap下拉菜单的容器<div class="dropdown-menu">放到了分类循环内部，导致每个分类都生成独立的下拉容器，完全不符合Bootstrap的下拉结构规范，所以点击按钮没有效果。

正确的代码重构方案 #

如果你使用Bootstrap 5（当前主流版本） #

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Philosophy topics
  </button>
  <!-- 下拉容器放在循环外部，包裹所有分类项 -->
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <% Category.find_each do |category| %>
      <%= link_to category.topic, category, class: "dropdown-item txt-n" %>
    <% end %>
  </div>
</div>

如果你使用Bootstrap 4 #

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Philosophy topics
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <% Category.find_each do |category| %>
      <%= link_to category.topic, category, class: "dropdown-item txt-n" %>
    <% end %>
  </div>
</div>

关键改动点 #

• 将<div class="dropdown-menu">移到Category.find_each循环外部，所有分类链接统一放在同一个下拉容器内
• Bootstrap 5需将data-toggle改为data-bs-toggle（5.x版本的命名规范）
• 移除了链接中的me-4类，下拉项不需要该外边距，会破坏菜单布局

额外注意事项 #

• 确保项目已正确引入Bootstrap的JavaScript文件：Bootstrap 5推荐引入bootstrap.bundle.js（已包含Popper.js，下拉功能依赖它）
• 如果下拉菜单放在导航栏(navbar)中，需要调整结构适配navbar规范：

<li class="nav-item dropdown">
  <button class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Philosophy topics
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <% Category.find_each do |category| %>
      <%= link_to category.topic, category, class: "dropdown-item txt-n" %>
    <% end %>
  </div>
</li>

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