Javascript 引导导航栏折叠按钮在rails 4、引导3中不可点击
我使用的是Rails4,bootstrap3(bootstrapSASS3.1.1)。当我向下调整窗口大小时,按钮会出现,但不可单击。我的光标在悬停时不会改变,按钮的外观也不会改变。当我点击时,什么也没发生 以下是相关的HTML:Javascript 引导导航栏折叠按钮在rails 4、引导3中不可点击,javascript,ruby-on-rails,twitter-bootstrap,twitter-bootstrap-3,Javascript,Ruby On Rails,Twitter Bootstrap,Twitter Bootstrap 3,我使用的是Rails4,bootstrap3(bootstrapSASS3.1.1)。当我向下调整窗口大小时,按钮会出现,但不可单击。我的光标在悬停时不会改变,按钮的外观也不会改变。当我点击时,什么也没发生 以下是相关的HTML: <!DOCTYPE html> <html> <head> <title>site</title> <link data-turbolinks-track="true" href="
<!DOCTYPE html>
<html>
<head>
<title>site</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/campaigns.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
</head>
<body>
<nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<ul class='nav navbar-nav navbar-left'>
<li>
<a href="#" id="logo-navbar"><img alt="Logo" height="27" src="/assets/Logo.png" width="27" /></a>
<a href='#' id='logo-text'>
<b>site</b>name
</a>
</li>
</ul>
</div>
<div class='navbar-collapse'>
<ul class='nav navbar-nav navbar-right'>
<li><a href="#"><img alt="search" height="15" src="/assets/search-icon.png" width="15" /></a></li>
<li><a href='#'>about</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
sign in
</a>
<ul class='dropdown-menu'>
<li><a href='#'>sign in</a></li>
<li><a href='#'>register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
app/views/layouts/application.html.haml:
!!!5
%html
%head
%title site
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
= csrf_meta_tags
%body
= render 'layouts/header'
= yield
app/assets/javascipt/application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap/dropdown
//= require bootstrap/transition
//= require bootstrap/collapse
您的引导JavaScript未加载。app/views/layouts/application.html.erb和app/assets/javascipt/application.js中有哪些内容?您可以将您所拥有的与示例应用程序进行比较,并查看教程。根据您的注释进行更新。看起来js正在加载-我遗漏了什么吗?我也尝试过只需要引导,它也会做同样的事情。如果你去掉你添加的自定义样式,这会起作用吗?不会。即使粘贴到完全库存的引导html中而没有css更改,它也不会工作。我们最终完全关闭了可折叠菜单,但不幸的是我们仍然没有找到它。@Demosophy尝试从
app/assets/javascipt/application.js
中删除/=require turbolinks
行。
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap/dropdown
//= require bootstrap/transition
//= require bootstrap/collapse