Bootstrap导航栏折叠不起作用

Question

I can't find the reason why, when trying to use the navbar button from Bootstrap, it doesn't work. 我无法找到原因，当试图使用Bootstrap中的导航栏按钮时，它不起作用。

I think it has something to do with my page loading the jQuery library or something, though I don't understand. 我认为它与我的页面加载jQuery库或其他东西有关，虽然我不明白。

Here is my code. 这是我的代码。 I'll show just the head and navbar parts since I believe there's where the problem lives. 我会展示头部和导航部件，因为我相信这就是问题所在。 Everything else is simple HTML structure: 其他一切都是简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <!--Boostrap jQuery-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjsmfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <!--Boostrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!--Favicon-->
    <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
    <!--Mi CSS-->
    <link rel="stylesheet" type="text/css" href="index.css">

    <!-- p5.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
    <script src="js/sketch.js" type="text/javascript"></script>

    <title>Festival Sonorum</title>
</head>

<body>
    <!-- navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
            <span class="sr-only">Navegación</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <a class="navbar-brand" href="index.html">Festival Sonorum</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="programa.html">Programa</a></li>
                    <li><a href="#acerca">Acerca</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                    <li><a href="#galeria">Galería</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Artistas <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
    <!--fin del navbar-->

Am I missing something? 我错过了什么吗？ Like loading a library? 喜欢加载图书馆？

Answer 1

Bootstrap does not include jQuery, so you need to add it yourself to make it work. Bootstrap不包含jQuery，因此您需要自己添加它以使其工作。 Add it just before your bootstrap.js script. 在bootstrap.js脚本之前添加它。

As per Bootstrap's docs : 根据Bootstrap的文档：

jQuery required 需要jQuery

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. 请注意，所有JavaScript插件都需要包含jQuery，如启动器模板中所示。 Consult our bower.json to see which versions of jQuery are supported. 请咨询我们的bower.json，了解支持哪些版本的jQuery。

On top of that, the integrity check fails on your bootstrap.min.js script. 最重要的是， bootstrap.min.js脚本上的完整性检查失败。 To make it work you need to fix that and add at least version 1.9.0 of jQuery: 为了使它工作，你需要修复它并添加至少版本1.9.0的jQuery：

...
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
...

Answer 2

You should check your bootstrap.css files in the head section, jquery.js before body closing tags, and you should give id to toggled nav same as button data-target. 您应该检查head部分中的bootstrap.css文件，jquery.js在正文结束标记之前，并且您应该将id作为按钮data-target提供给切换导航。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">  
  <span class="navbar-toggler-icon"></span>
</button>
     <div class="collapse navbar-collapse" id="navbarResponsive">

Bootstrap导航栏折叠不起作用

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-10-05 20:55:11

解决方案2
0 2019-02-22 09:30:47

Bootstrap导航栏折叠不起作用

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-10-05 20:55:11

解决方案2 0 2019-02-22 09:30:47

解决方案1
3 已采纳 2016-10-05 20:55:11

解决方案2
0 2019-02-22 09:30:47