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

Posted 2023-05-08

【中文标题】Bootstrap.js 未在 Rails 应用程序中切换移动菜单

【英文标题】：Bootstrap.js not expanding mobile menu on toggle in Rails application

【发布时间】：2018-01-19 06:36:54

【问题描述】：

当我按下移动菜单时，即使添加了 .toggled 类，我的汉堡菜单也没有展开。我玩过 javascript 要求命令的顺序，但我想要的 javascript 似乎没有工作。

我的努力：

gem 'bootstrap-sass' 好像是implemented correctly into Gemfile and into application.scss

确定我做了//= require 'jQuery'before //= require jquery_ujsaccording 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'

应用程序.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

应用程序.scss

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

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

【问题讨论】：

所以这在桌面 google chrome/mozilla 响应版本上不起作用？或者它不适用于您的手机？我问是因为使用 chrome，您可以在移动设备上调试您的应用程序，连接远程设备。某些jquery 功能在移动设备上不起作用。例如，几天前我发现.focus() 在remote mobile 上不起作用，但在responsive design debugger 上没问题

@FabrizioBertoglio 当我在我的 iPhone 上尝试访问它时它不起作用。我目前正在heroku上运行它以进行生产。如果你想看，这里是网址：bukenstok.herokuapp.com

【参考方案1】：

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