sb admin 2多层菜单未折叠
[英]sb admin 2 multi-level menu not collapsing
问题描述
我正在尝试将sb admin 2模板的菜单集成到我的ruby on rails应用程序中： 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==" />
2 个解决方案
解决方案1
2 已采纳 2015-09-25 22:03:08
我终于找到了问题。 问题是Rails已经预先包含了jquery。 所以它叫他的jquery，然后是我的boostrap，然后是我的jquery（我在我的Assets文件夹中），这引起了冲突。 我只需要从我的assets / javascript文件夹中删除我的jquery.js，一切就可以了。
我不知道需要按特定顺序加载.js文件，这是我的新手。 对不起，给您带来的麻烦，并感谢您的帮助。
解决方案2
0 2015-09-25 17:09:13
这是使此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>
多级菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.