sb admin 2多层菜单未折叠

Question

I am trying to integrate the menu of the sb admin 2 template to my ruby on rails app: http://startbootstrap.com/template-overviews/sb-admin-2/

I tried adding piece by piece to see how things work. I added the top and side nav bars, but have a problem when adding the multi-level menu, it doesn't collapse, and starts open. I even checked all referenced js and css files to see which made the the menu collapse and expand, but only found in sb-admin-2.css a reference to the starting style.

I included all the css and js files included in the included index.html to my application.html.erb (through the stylesheet_link_tag, rails automatically adds the files in assets, I checked by looking at the source code and they were there. ) Can anyone please provide me with help on how to solve this issue?

Thanks for all your help.

Here's the code for the nav bar:

<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>

--EDITED AFTER FIRST ANSWER: I checked your code and it is what I have in the files sb-admin-2.css, sb-admin-2.j, metisMenu_min.js.

Could it be that rails is messing up the dependencies: This is my code in rails of the references:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>  
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>  
<%= csrf_meta_tags %>

And this is the source code of the references of the page when open in the browser:

<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==" />

Answer 1

I finally found the problem. The thing is that rails already pre-included jquery. So it called his jquery, then my boostrap, and then my jquery (which I had in my assets folder), this was causing a conflict. I just had to remove my jquery.js from my assets/javascript folder, and everything worked ok.

I didn't know .js files needed to load in a certain order, I'm new to this. Sorry for the troubles and thanks for helping me out.

Answer 2

Here are all the files to make this navbar work properly. Depending on how you have Bootstrap set up inside Rails could (potentially) be affecting your dependencies as well.

You should look at the Bootstrap-SASS Gem.

 /* * 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>