javascript - sb admin 2 多级菜单不折叠

Question

我正在尝试将 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 自动将文件添加到 Assets 中，我通过查看源代码进行了检查，它们在那里.) 谁能帮我解决这个问题？

感谢您的帮助。

这是导航栏的代码:

<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 弄乱了依赖关系: 这是我在引用资料中的代码:

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

Answer 1

终于找到问题了。问题是 rails 已经预先包含了 jquery。 所以它调用了他的 jquery，然后是我的 boostrap，然后是我的 jquery(我在我的 Assets 文件夹中)，这引起了冲突。 我只需要从我的 assets/javascript 文件夹中删除我的 jquery.js，一切正常。

我不知道 .js 文件需要按特定顺序加载，我是新手。抱歉给您带来麻烦，感谢您帮助我。