我正在尝试将sb admin 2模板的菜单集成到我的ruby on rails app：http://startbootstrap.com/template-overviews/sb-admin-2/
我尝试逐个添加，看看事情是如何运作的。我添加了顶部和侧面导航栏，但在添加多级菜单时出现问题，它没有崩溃，并且开始打开。我甚至检查了所有引用的js和css文件，看看是什么使菜单崩溃和扩展，但只在sb-admin-2.css中找到了对起始样式的引用。
我将所包含的index.html中包含的所有css和js文件包含到我的application.html.erb中（通过stylesheet_link_tag，rails自动添加资源中的文件，我通过查看源代码进行检查，他们在那里。）有人可以请我帮忙解决这个问题吗？
感谢您的帮助。
以下是导航栏的代码：
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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>
<a class="navbar-brand" href="#">Title</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Second Level Item</a>
</li>
<li>
<a href="#">Third Level <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="#">Third Level Item</a>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
</div>
- 在第一次答复后被编辑： 我检查了你的代码，这是我在sb-admin-2.css，sb-admin-2.j，metisMenu_min.js文件中的内容。
可能是rails正在搞乱依赖关系： 这是我在引用的rails中的代码：
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
这是在浏览器中打开时页面引用的源代码：
<link rel="stylesheet" media="all" href="/assets/font-awesome.self-be09f9a5a5e8fd15a4e4d68dc8509252a33dc056003e53159586cf99368ba0e7.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/bootstrap.min.self-2c354d7c0179bd35563b93633b23ac5fb07c67d531d40a75695bacbd0eadb799.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/involved_party_types.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/metisMenu.min.self-39a68158cd09f5740df90344edf98bf0dec5b8b07d6f8c5e1faed3f2bbf208f2.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/morris.self-b331eeb1aa336d072d4e7e055fede5e44d00e73a31cfbfa77b87ebf0d816265c.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/sb-admin-2.self-b9c045d4d7df05f2762c0576263ab2fdb31ede2538fbf47ce4539deb708c4a53.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-551705b6f8cb8e2c3149bc63ddf9d6103fc4b9852aaa51b390f60f08f2979c12.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/timeline.self-adcf4ac8978841626cabd1a65b1ae2b0419a1ddb13083a5aa5959a60bef9cfb5.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-927f1a911022a64b9126b19f80d94eb609a1aec9f0183c419caad57bd88fb8af.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d456baa54c1fa6be2ec3711f0a72ddf7a5b2f34a6b4f515f33767d6207b7d4b3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.min.self-d66e555f160df017adf1ca16a36cd609a36d49c51637e365c5b8847d0065fa40.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/involved_party_types.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.min.self-6806c88afe0840c35208894c4ceba911154f696b624614b30b884298c2c3e00d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/metisMenu.min.self-2dce2e92b1c09f455d4d44807dcb76a7e68af9aacd6a940114f2241e41b0efb0.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sb-admin-2.self-56bd6a6e5b0d37d83b0261b8de91fb454a750a4641c24bdc62f1bc5d860acb39.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="Q5ZWAYlRNAWFPn+j2HXW+XoZqF9joNByaIKGaFx6sjzcYgzp6um28PSRJ6LswzK7CuOTMjg1+CETZut4CmOzbg==" />
答案 0 :(得分：2)
我终于找到了问题。问题是rails已经预先包含了jquery。 所以它调用了他的jquery，然后是我的boostrap，然后是我的jquery（我在我的资产文件夹中），这引起了冲突。 我只需要从我的assets / javascript文件夹中删除我的jquery.js，一切正常。
我不知道以某种顺序加载所需的.js文件，我是新手。对不起，麻烦和感谢帮助我。
答案 1 :(得分：0)
以下是使navbar正常工作的所有文件。根据您在Rails中设置Bootstrap的方式，可能（可能）也会影响您的依赖关系。
你应该看看Bootstrap-SASS宝石。
/*
* metismenu - v1.1.3
* Easy menu jQuery plugin for Twitter Bootstrap 3
* https://github.com/onokumus/metisMenu
*
* Made by Osman Nuri Okumus
* Under MIT License
*/
! function(a, b, c) {
function d(b, c) {
this.element = a(b), this.settings = a.extend({}, f, c), this._defaults = f, this._name = e, this.init()
}
var e = "metisMenu",
f = {
toggle: !0,
doubleTapToGo: !1
};
d.prototype = {
init: function() {
var b = this.element,
d = this.settings.toggle,
f = this;
this.isIE() <= 9 ? (b.find("li.active").has("ul").children("ul").collapse("show"), b.find("li").not(".active").has("ul").children("ul").collapse("hide")) : (b.find("li.active").has("ul").children("ul").addClass("collapse in"), b.find("li").not(".active").has("ul").children("ul").addClass("collapse")), f.settings.doubleTapToGo && b.find("li.active").has("ul").children("a").addClass("doubleTapToGo"), b.find("li").has("ul").children("a").on("click." + e, function(b) {
return b.preventDefault(), f.settings.doubleTapToGo && f.doubleTapToGo(a(this)) && "#" !== a(this).attr("href") && "" !== a(this).attr("href") ? (b.stopPropagation(), void(c.location = a(this).attr("href"))) : (a(this).parent("li").toggleClass("active").children("ul").collapse("toggle"), void(d && a(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide")))
})
},
isIE: function() {
for (var a, b = 3, d = c.createElement("div"), e = d.getElementsByTagName("i"); d.innerHTML = "<!--[if gt IE " + ++b + "]><i></i><![endif]-->", e[0];) return b > 4 ? b : a
},
doubleTapToGo: function(a) {
var b = this.element;
return a.hasClass("doubleTapToGo") ? (a.removeClass("doubleTapToGo"), !0) : a.parent().children("ul").length ? (b.find(".doubleTapToGo").removeClass("doubleTapToGo"), a.addClass("doubleTapToGo"), !1) : void 0
},
remove: function() {
this.element.off("." + e), this.element.removeData(e)
}
}, a.fn[e] = function(b) {
return this.each(function() {
var c = a(this);
c.data(e) && c.data(e).remove(), c.data(e, new d(this, b))
}), this
}
}(jQuery, window, document);
$(function() {
$('#side-menu').metisMenu();
});
//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {
$(window).bind("load resize", function() {
topOffset = 50;
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {
$('div.navbar-collapse').addClass('collapse');
topOffset = 100; // 2-row-menu
} else {
$('div.navbar-collapse').removeClass('collapse');
}
height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
height = height - topOffset;
if (height < 1) height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height) + "px");
}
});
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
});/*
* metismenu - v1.1.3
* Easy menu jQuery plugin for Twitter Bootstrap 3
* https://github.com/onokumus/metisMenu
*
* Made by Osman Nuri Okumus
* Under MIT License
*/
.arrow {
float: right;
line-height: 1.42857
}
.glyphicon.arrow:before {
content: "\e079"
}
.active>a>.glyphicon.arrow:before {
content: "\e114"
}
.fa.arrow:before {
content: "\f104"
}
.active>a>.fa.arrow:before {
content: "\f107"
}
.plus-times {
float: right
}
.fa.plus-times:before {
content: "\f067"
}
.active>a>.fa.plus-times {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.plus-minus {
float: right
}
.fa.plus-minus:before {
content: "\f067"
}
.active>a>.fa.plus-minus:before {
content: "\f068"
}
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar .navbar-top-links {
margin-right: 0;
}
.navbar .navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar .navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar .navbar-top-links .dropdown-menu li {
display: block;
}
.navbar .navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar .navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar .navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar .navbar-top-links .dropdown-messages,
.navbar .navbar-top-links .dropdown-tasks,
.navbar .navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar .navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar .navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar .navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar .navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.navbar .sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.navbar .sidebar .sidebar-search {
padding: 15px;
}
.navbar .sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.navbar .sidebar ul li a.active {
background-color: #eee;
}
.navbar .sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.navbar .sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.navbar .sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.navbar .sidebar .nav-second-level li a {
padding-left: 37px;
}
.navbar .sidebar .nav-third-level li a {
padding-left: 52px;
}
@media(min-width:768px) {
.navbar .sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar .navbar-top-links .dropdown-messages,
.navbar .navbar-top-links .dropdown-tasks,
.navbar .navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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> <a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li> <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a href="flot.html">Flot Charts</a>
</li>
<li> <a href="morris.html">Morris.js Charts</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li> <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>
</li>
<li> <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>
</li>
<li> <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a href="panels-wells.html">Panels and Wells</a>
</li>
<li> <a href="buttons.html">Buttons</a>
</li>
<li> <a href="notifications.html">Notifications</a>
</li>
<li> <a href="typography.html">Typography</a>
</li>
<li> <a href="icons.html"> Icons</a>
</li>
<li> <a href="grid.html">Grid</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li> <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a href="#">Second Level Item</a>
</li>
<li> <a href="#">Second Level Item</a>
</li>
<li> <a href="#">Third Level <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li> <a href="#">Third Level Item</a>
</li>
<li> <a href="#">Third Level Item</a>
</li>
<li> <a href="#">Third Level Item</a>
</li>
<li> <a href="#">Third Level Item</a>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li> <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li> <a href="blank.html">Blank Page</a>
</li>
<li> <a href="login.html">Login Page</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>