Ruby on Rails中Bootstrap下拉按钮点击无响应问题求助

问题现象 #

• 按照Bootstrap 5.2官方文档实现下拉按钮，点击无响应
• 浏览器控制台报错：TypeError: undefined is not an object (evaluating 'this._menu.classList')

相关代码 #

1. application.html.erb（资源引入） #

<!DOCTYPE html>
<html>
  <head>

    <title><%= full_page_title(yield(:title)) %></title>
    <%= favicon_link_tag asset_path('beast_hack_favicon.png') %>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body class="<%= yield(:page) %>">
    <%= yield %>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</html>

2. 导航栏下拉按钮代码 #

<div class="navbar navbar-expand-md shadow fixed-top px-2">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to "BEAST Hack", root_path('#'), class: 'navbar-brand text-white fw-bold' %>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="navbar-nav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <% if user_signed_in? %>
          <li class="nav-item"><%= link_to "Новости", news_path, class: 'nav-link text-white' %></li>
          <li class="nav-item"><%= link_to "Задания", tasks_path, class: 'nav-link text-white' %></li>
          <li class="nav-item"><%= link_to "Команда", team_path, class: 'nav-link text-white' %></li>
          <li class="nav-item"><%= link_to "Личный кабинет", account_path, class: 'nav-link text-white' %></li>
          <li class="nav-item"><%= link_to "О нас", root_path('#'), class: 'nav-link text-white' %></li>
            <% if current_user.role == 'admin' %>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Управление
                </a>
              </li>
              <ul class="dropdown-menu">
                <li><%= link_to "Посты", moderator_posts_path, class: 'nav-link text-white dropdown-item' %></li>
                <li><%= link_to "Участники", moderator_users_path, class: 'nav-link text-white dropdown-item' %></li>
                <li><%= link_to "Команды", moderator_teams_path, class: 'nav-link text-white dropdown-item' %></li>
                <li><hr class="dropdown-divider"></li>
                <li><%= link_to "Панель управления", admin_control_panel_path, class: 'nav-link text-white dropdown-item' %></li>
              </ul>
            <% end %>
        <% else %>
          <li class="nav-item"><%= link_to "О нас", root_path('#'), class: 'nav-link text-white' %></li>
          <li class="nav-item"><%= link_to "Партнерам", root_path('#'), class: 'nav-link text-white' %></li>
        <% end %>
        </ul>
      </div>
      <div class="d-flex nav navbar-nav navbar-right w">
        <% if user_signed_in? %>
          <%= button_to "Выйти", destroy_user_session_path, method: :delete,
                        data: { turbo: false }, class: 'btn btn-outline-light btn-nav mx-1' %>
        <% else %>
          <%= button_to "Вход", new_user_session_path, method: :get,
                        data: { turbo: false }, class: 'btn btn-outline-light btn-nav mx-1' %>
          <%= button_to "Регистрация", new_user_registration_path, method: :get,
                        data: { turbo: false }, class: 'btn btn-outline-light btn-nav mx-1' %>
        <% end %>
      </div>
    </div>
  </div>
</div>
<div style="height: 70px"></div>

3. Gemfile配置 #

gem 'jquery-rails'

问题原因与解决方案 #

1. Bootstrap版本不匹配 #

你引入的CSS是5.2.3版本，但JS用的是5.0.0-beta2，版本不一致会导致组件逻辑冲突，这是报错的核心原因。

• 修复：将JS的CDN链接替换为与CSS同版本的5.2.3：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

2. 下拉按钮HTML结构错误 #

Bootstrap 5要求下拉菜单的<ul class="dropdown-menu">必须放在带有dropdown类的<li>内部，你的代码把菜单放在了<li>外面，导致JS无法定位到对应的菜单元素。

• 修复：将<ul class="dropdown-menu">移动到<li class="nav-item dropdown">内部，同时移除dropdown-item上多余的nav-link text-white（dropdown-item自带链接样式）：

<% if current_user.role == 'admin' %>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Управление
    </a>
    <ul class="dropdown-menu">
      <li><%= link_to "Посты", moderator_posts_path, class: 'dropdown-item' %></li>
      <li><%= link_to "Участники", moderator_users_path, class: 'dropdown-item' %></li>
      <li><%= link_to "Команды", moderator_teams_path, class: 'dropdown-item' %></li>
      <li><hr class="dropdown-divider"></li>
      <li><%= link_to "Панель управления", admin_control_panel_path, class: 'dropdown-item' %></li>
    </ul>
  </li>
<% end %>

3. 关于jQuery的说明 #

Bootstrap 5已不再依赖jQuery，若jquery-rails没有其他业务用途，可直接移除，不会影响Bootstrap组件正常运行。

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