Question

我正在使用Bootstrap开发自己的网站，并在顶部添加了一个折叠式导航栏，但是当我单击“汉堡包”按钮时，该导航栏无法展开。我读过一些博客，但似乎没有两个主要问题： -不提供良好的数据目标 -不要将jquery调用放在引导javascript之前我今天整整花了整整一天的时间试图弄清楚这一点。这是我的html，如果您发现有什么我会很放心的。


<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" media="screen" type="text/css" href="cvop1.css" />
    <link rel="stylesheet" media="screen and (max-width: 767px)" type="text/css" href="petite_version1.css" />

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <title> Oncle Joe </title>
    </head>


    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

                <div class="navbar-header">

                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">Joseph Durand</a>

                </div>

                 <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Formations <span class="caret"></span>  </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Cours proposés</li>
                        <li><a href="#">Macroéconomie</a></li>
                        <li><a href="#">Histoire de la philosophie politique</a></li>
                        <li><a href="#">Mécanique quantique</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Suggestions et avis</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Orientation<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Guide des études</li>
                        <li><a href="#">Études à l'étranger</a></li>
                        <li><a href="#">Autres témoignages</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Ajoutez vos parcours</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Art<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Découvrez et commmentez !</li>
                        <li><a href="#">Musique</a></li>
                        <li><a href="#">Artistes famille</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Partagez-moi vos créations</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Proches<span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Un accès public et privé</li>
                        <li><a href="#">Ma mif</a></li>
                        <li><a href="#">Ma meuf</a></li>
                        <li><a href="#">Mes gars sûrs</a></li>
                    </ul>
                </li>

                <li> <a href="#"> Mini-jeux </a></li>

                <li> <a href="https://josephwatchdog.github.io/CV/#"> <img src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-1/p320x320/15871974_1190156091033303_4585352380125885170_n.jpg?_nc_cat=103&_nc_sid=dbb9e7&_nc_ohc=qn93db1mdrMAX_7cN9y&_nc_ht=scontent-cdt1-1.xx&_nc_tp=6&oh=495fb008b60203147ed553338147388b&oe=5EC9B841" alt="C'est moi!" width="22" height="22"/> </a> </li>
                </ul>

                </div>


         </nav>
        ```

Answer 1

我整个晚上都看过其他人的帖子，发现其中一个回答了我的问题。我已经下载了最新的jQuery版本（3.某些东西），但仅适用于jQuery 1或2 我从对这个问题的第一条评论中得到了这个主意： Navbar collapse is not working in Bootstrap 很抱歉，如果我在此困扰您太长时间，希望对您有所帮助：

检查数据目标
检查在引导javascript之前是否调用了jquery
检查您的jquery和bootstrap版本是否符合您想要的命令/功能

Bootstrap 3导航栏不崩溃

1 个答案: