Question

我的rails应用程序有一个完美的导航丸菜单：

<div class="col-lg-2 col-sm-3">
   <ul class="nav nav-pills nav-stacked">
      <li class="<%= 'active' if current_page?(articles_path) %>"><%= link_to "articles", articles_path, data: { toggle: "pill"} %></li>
      <li class="<%= 'active' if current_page?(appointments_path) %>"><%= link_to "appointments", appointments_path, data: { toggle: "pill"} %></li>
      <li class="<%= 'active' if current_page?(users_path) %>"><%= link_to "users", users_path, data: { toggle: "pill" } %></li>
   </ul>
</div>

然后我在其他地方添加了一个下拉菜单。因此我需要在application.js中添加“// = require bootstrap”：

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

下拉菜单工作正常，但由于我添加了“require bootstrap”，nav-pills菜单中的链接不再有效。当我点击一个药丸没有任何反应，firefox在控制台中显示例如这个错误：

错误：语法错误，无法识别的表达式：/ appointmentments

如果我删除“require bootstraps”，nav-pills菜单中的链接会再次起作用，但下拉菜单不会下拉。

当我在application.js中使用“require bootstraps”时，我在nav-pills菜单中需要更改哪些建议？

更多信息

的Gemfile：

source 'https://rubygems.org'

ruby '2.2.4'

gem 'rails',        '4.2.6'
gem 'bcrypt',       '3.1.11'
gem 'bootstrap-sass',    '3.3.6' # needed for bootstrap css
gem 'sass-rails',   '5.0.4'
gem 'uglifier',     '3.0.0'
gem 'coffee-rails', '4.1.1'
gem 'jquery-rails', '4.1.1'
gem 'turbolinks',   '2.5.3'
gem 'jbuilder',     '2.4.1'
gem 'sdoc',         '0.4.0', group: :doc

group :development, :test do
  gem 'sqlite3',     '1.3.11'
  gem 'byebug',      '8.2.2'
  gem 'web-console', '3.1.1'
  gem 'spring',      '1.6.4'
end

group :test do
  gem 'minitest-reporters', '1.1.8'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard', '2.13.0'
  gem 'guard-minitest',     '2.4.4'
end

group :production do
  gem 'pg',             '0.18.4'
  gem 'rails_12factor', '0.0.3'
  gem 'puma',           '3.2.0'
end

application.scss：

@import "bootstrap-sprockets";
@import "bootstrap";
@import "/*";
@import "/**/*";

routes.rb中：

Rails.application.routes.draw do

  get 'sessions/new'

  root             'static_pages#home'
  get 'about'   => 'static_pages#about'
  get 'contact' => 'static_pages#contact'
  get 'articles' => 'administration#articles'
  get 'appointments' => 'administration#appointments'
  get 'createarticle' => 'articles#new'
  get 'createappointment' => 'appointments#new'
  get 'interface' => 'administration#interface'
  get 'help' => 'administration#help'
  get 'createuser' => 'users#new'
  get 'users' => 'administration#users'
  get    'adminlogin'   => 'sessions#new'
  post   'adminlogin'   => 'sessions#create'
  delete 'adminlogout'  => 'sessions#destroy'

  resources :users
  resources :articles
  resources :appointments
end

完整错误堆栈跟踪：

Sizzle</Sizzle.error() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:1503
Sizzle</Sizzle.tokenize() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:2160
Sizzle</Sizzle.select() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:2581
Sizzle() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:904
.find() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:2827
jQuery.fn.init() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:2950
jQuery() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:76
Tab.prototype.show() bootstrap.self-d0e973a52d36a01036265aeefaf2d1ae3499d2cb231a9be3bd846432daf231de.js:2097
Plugin/<() bootstrap.self-d0e973a52d36a01036265aeefaf2d1ae3499d2cb231a9be3bd846432daf231de.js:2170
.each() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:371
jQuery.prototype.each() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:138
Plugin() bootstrap.self-d0e973a52d36a01036265aeefaf2d1ae3499d2cb231a9be3bd846432daf231de.js:2165
clickHandler() bootstrap.self-d0e973a52d36a01036265aeefaf2d1ae3499d2cb231a9be3bd846432daf231de.js:2194
jQuery.event.dispatch() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:5226
jQuery.event.add/elemData.handle() jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js:487

Answer 1

我为css和js添加了这些东西，之后所有工作对我来说都很好。

    %script{src: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
        integrity: "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS",
        crossorigin: "anonymous"}

你也在使用 - ＆gt; css：@import 'bootstrap';

添加“// = require bootstrap”会导致nav-pills链接出错

1 个答案: