Bootstrap 下拉菜单不与新的 Rails 布局切换

Posted 2023-05-08

【中文标题】Bootstrap 下拉菜单不与新的 Rails 布局切换

【英文标题】：Bootstrap dropdowns not toggling with new rails layout

【发布时间】：2019-07-13 08:30:52

【问题描述】：

我已经实现了一个新的 Rails 布局，但我无法让导航菜单中的下拉菜单正常工作。主页中菜单的下拉菜单（不同的布局）工作正常。我确实加载了 jquery，但显然某些内容没有按此布局的正确顺序加载，因为它没有切换。

有效的布局有这个'application.js'：

//= require jquery
//= require popper
//= require rails-ujs
//= require bootstrap
//= require_tree ./common

不起作用的布局有这个'stack.js'

//= require jquery
//= require popper
//= require rails-ujs
//= require bootstrap
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/morris.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common

共同的文件是两种布局都需要的特定于页面的 js 文件。

这是一个来自下拉菜单的 sn-p：

  <% if user_signed_in? %>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">
      <span class="glyphicon glyphicon-user">
        <%= current_user.name %>
      </span>
      <b class="caret"></b>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <%= link_to( t(:profile), user_path(current_user), class:"dropdown-item") %>
      <div class="divider"></div>
      <%= link_to("Log out", destroy_user_session_path, method: :delete, class:"dropdown-item") %>
    </div>
    </li>
  </ul>
<% end %>

这是新布局导航中的一个 sn-p，它不起作用：

  <li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown"><span class="avatar avatar-online"><%= image_tag('stack/portrait/small/avatar-s-1.png')%><i></i></span><span class="user-name"><%= current_user.name %></span></a>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#"><i class="ft-user"></i> Edit Profile</a>
      <a class="dropdown-item" href="#"><i class="ft-mail"></i> My Inbox</a><a class="dropdown-item" href="user-cards.html"><i class="ft-check-square"></i> Task</a>
      <a class="dropdown-item" href="#"><i class="ft-message-square"></i> Chats</a>
      <div class="dropdown-divider"></div>
      <%= link_to('Logout', destroy_user_session_path, method: :delete, class: "dropdown-item") %>
    </div>
  </li>

applicacion.scss（仅适用的驱动布局）

 @import "bootstrap";

stack.scss（驱动其下拉菜单不起作用的布局）：

///FILES IMPORTED FROM VENDOR.CSS///
@import 'bootstrap';

@import 'stack/fonts/feather/style';
@import 'stack/fonts/font-awesome/css/font-awesome';
@import 'stack/fonts/flag-icon-css/css/flag-icon';
@import 'stack/vendors/extensions/pace';
//// END FILES IMPORTED FROM VENDOR.CSS ///

@import 'stack/fonts/meteocons/style';
@import 'stack/vendors/extensions/unslider';
@import 'stack/vendors/charts/morris';

//FILES THAT WERE BEING IMPORTED BY APP.CSS

@import "stack/bootstrap-extended";
@import "stack/colors";
@import "stack/components";

////////

@import 'stack/core/menu/menu-types/vertical-menu';
@import 'stack/fonts/simple-line-icons/style';
@import 'stack/core/colors/palette-gradient';
@import 'stack/pages/timeline';
@import 'style';

我尝试更改 bootstrap js 在 stack.js 中的加载顺序，但没有成功。在过去的两天里，我一直在尝试解决这个问题，但我没有想法。我正在使用 Rails 5.2。有什么想法吗？

【参考方案1】：

答案取决于您使用的引导程序版本。如果您使用的是 bootstrap 4，请从 application.scss 文件中删除所有 require 标签。

【讨论】：

我正在使用引导程序 4。但是我确实在 application.scss 中包含引导程序（仅驱动一种布局）并且它工作正常。上面更新了 scss 详细信息

【参考方案2】：

我想出了这个。模板中的一些 JS 已经加载了 jquery，因此通过将其加载到 layout.js 文件中，然后也加载到脚本中（somehwere），这会导致问题。