时间戳

首页 > 解决方案 > Bootstrap 3导航栏不折叠

html - Bootstrap 3导航栏不折叠

问题描述

我正在使用引导程序开发自己的网站，并添加了一个固定在顶部的折叠导航栏，但是当我单击汉堡按钮时它不会展开。我已经阅读了一些博客，但似乎没有两个主要问题： - 没有放置一个好的数据目标 - 没有在引导 javascript 之前放置 jquery 调用我今天花了一整天的时间试图弄清楚这一点出去。这是我的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>
        ```

标签： htmltwitter-bootstrapnavbarcollapse

解决方案

我整个晚上都阅读了其他帖子，并找到了一个回答我的帖子。我下载了一个太新的 jQuery 版本（3. 东西），而它只适用于 jQuery 1 或 2 我从对这个问题的第一条评论中得到了这个想法： 导航栏崩溃在 Bootstrap 中不起作用 如果我打扰了任何一个，我很抱歉你太长了，希望这对其他人有帮助：

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

推荐阅读