Bootstrap-sass gem 无法为下拉菜单加载 js

Posted 2023-05-09

技术标签:

【中文标题】Bootstrap-sass gem 无法为下拉菜单加载 js【英文标题】：Bootstrap-sass gem fails to load js for dropdown menu 【发布时间】：2014-07-19 04:42:29 【问题描述】：

我是 ruby on rails 编程的初学者，最近我一直在用 twitter bootstrap 作为 CSS 框架做演示项目。我已将 bootstrap-sass 包含在 gem 文件中并捆绑在一起，除了下拉菜单和 java 脚本功能外，bootstrap 的所有部分都可以正常工作。请建议我哪里出错了。这是我的 gem 文件：

    source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use sqlite3 as the database for Active Record
group :development do
    gem 'sqlite3'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'

# Use Uglifier as compressor for javascript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc
group :production do
gem 'pg'
end
gem 'devise'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
gem 'bootstrap-sass', '~> 3.1.1.1'

这是我的 application.js

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

我的 application.html.erb 文件如下所示

<!DOCTYPE html>
<html>
<head>
<title>Mirror</title>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true   %>
<%= javascript_include_tag 'application' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>

最后我的 application.css.scss 看起来是这样的

/*
@import "bootstrap";
* This is a manifest file that'll be compiled into application.css, which will include   all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets,    vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree
*= require_self

如果提供任何建议或提示，我将不胜感激。谢谢！

【问题讨论】：

【参考方案1】：

将此添加到 application.js 文件的末尾：

$('.dropdown-toggle').dropdown();

下拉菜单现在应该可以使用了。

【讨论】：

是的，这对我有用！但我想知道为什么它需要这样。我发现那里的其他人也有同样的问题github.com/rails/turbolinks/issues/319 对不起，这个问题不是我提出来的，所以我无法将其标记为正确答案。【参考方案2】：

添加jquery-turbolinks gem 是一种不那么棘手的解决方法。

下拉菜单不起作用的原因是它们绑定到 $(document).ready 而不是 $(document).on('page:change')，这是 turbolinks 使用的。

jquery-turbolinks gem 将使得就绪调用也响应 turbolink 的 page:change 调用。

第 1 步： 将 gem jquery-turbolinks 添加到您的 Gemfile。

第 2 步： 按以下顺序将其添加到您的 JavaScript 清单文件中：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

八大兵！

【讨论】：

对我不起作用，不得不求助于$('.dropdown-toggle').dropdown(); 很抱歉听到这个消息，本。如果您必须这样做，那么这绝对是某种涡轮链接问题。啊，好吧，你必须做你必须做的！ jquery-turbolinks 现已弃用【参考方案3】：

试试看

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets

到您的 application.js 文件中。 Bootstrap-sprockets 为您提供所有引导 js 文件。有关需要引导组件（单独）的更多信息，请访问bootstrap-sass documentation。

【讨论】：

以上是关于Bootstrap-sass gem 无法为下拉菜单加载 js的主要内容，如果未能解决你的问题，请参考以下文章

使用 bootstrap-sass gem 覆盖 Rails 中的 Bootstrap 变量

Bootstrap-sass 在 Rails 应用程序中不起作用

引导宝石不起作用

如果空格键在所有浏览器中打开下拉菜单，为啥我的 onchange 触发菜单被认为无法访问

安装gem“设计”时如何修复错误？

Rails5 Bootstrap崩溃不起作用