Bootstrap.js 在 Rails 应用程序中切换时未展开移动菜单

Question

即使在我按下移动菜单时添加了 .toggled class，我的汉堡菜单也没有展开。我试过 javascript require 命令的顺序，但我想要的 javascript 似乎不起作用。

我的努力：

gem 'bootstrap-sass' 好像是 implemented correctly into Gemfile and into application.scss
确保我做到了 //= require 'jQuery' before //= require jquery_ujs according to this

这是我的 Rails 应用程序的文件：

宝石文件

gem 'jquery-rails'
gem 'sass-rails', '~> 5.0'
gem 'sprockets-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'jquery-turbolinks'

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
// require turbolinks
//= require_tree .

_navigation.html.erb

的相关部分

   <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Brand", root_path , class: "navbar-brand", id: "logo" %>
    </div>

此外，如果有帮助，我正在使用 Material Pro UI Kit

application.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "devise_bootstrap_views";
@import "sass_copy/material-kit";

我确保从 Material Pro Assets 中删除了 bootstrap.js 和 jquery.min.js 文件，以确保我没有使用同一个文件两次。此外，没有 bootstrap.scss 或 .css 文件需要关注。感谢您的帮助！

Answer 1

我发现我正在加载我的自定义 javascript 两次，这导致导航切换两次（因此按下汉堡菜单时没有任何变化）。这背后的重要教训：在你的控制台中搜索以查看哪些 JavaScript 文件正在处理你遇到问题的 classes（在我的例子中是切换的 class），看看你是否有重复自己。会出问题。

Bootstrap.js 在 Rails 应用程序中切换时未展开移动菜单

Bootstrap.js not expanding mobile menu on toggle in Rails application

javascript

jquery

ruby-on-rails

asset-pipeline

twitter-bootstrap