折叠导航栏

Question

我想在Bootstrap中制作一个折叠式导航栏。 但是我的代码不起作用:(以下是我的代码。我无法弄清楚哪里出了问题。请帮助我

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Website</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Logo</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> About</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Services</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Blog</a></li>
                </ul>
        </div>
        </div>
    </nav>
</body>
</html>

Answer 1

我发现您没有在代码中包含jQuery，这就是它无法正常运行的原因。 请始终记住，所有Bootstrap的JavaScript插件都需要jQuery才能使其运行（请阅读Bootstrap 文档，以了解兼容的jQuery版本）。

包含jQuery的正确方法就在Bootstrap的JavaScripts文件之前（在顶部）。 为了使页面加载速度更快，请将JavaScript放在页面内容的末尾，即</body>标记的紧前面。

您可以在此处列出所有jQuery版本（仅Core版本）。

摘录

<!-- jQuery must come first -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- And below here is the Bootstrap JS file(s) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

您的代码实际上很好，没有错误。 这是您的代码的演示。

折叠导航栏

问题描述

1 个解决方案

解决方案1
0 2016-08-15 05:52:12

折叠导航栏

问题描述

1 个解决方案

解决方案1 0 2016-08-15 05:52:12

解决方案1
0 2016-08-15 05:52:12