web-dev-qa-db-fra.com

bouton d'effondrement de la barre de navigation 3 bootstrap ne fonctionne pas

J'ai fait quelques modifications dans la barre de navigation, mais maintenant, le bouton bascule ne répond pas au clic . Voici mon code. Où je me trompe?

CODE: 

  <body>
    <div class="navbar-wrapper">
      <div class="container">

        <div class="navbar navbar-default navbar-static-top" role="navigation">
          <div class="container">
            <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>
              </button>
              <a class="navbar-brand" href="./index.html">ossoc</a>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button>
                <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
jqueryhtmlcsstwitter-bootstrap
27
user3108790

Vous devez changer dans ce balisage

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

changer la 

data-target=".navbar collapse" 

à 

data-target=".navbar-collapse"

Motif: La valeur de data-target est un nom de classe quelconque du div div associé. Dans ce cas c'est 

<div class="collapse navbar-collapse">  <-- Look at here
     <ul class="nav navbar-nav navbar-right">
     .....
</div>

Js Fiddle Démo

47
Sachin

J'avais un problème similaire. J'ai regardé le HTML plusieurs fois et j'étais sûr que c'était correct. Ensuite, j'ai commencé à jouer avec l'ordre de jquery et bootstrap javascript. 

À l’origine, j’avais bootstrap.min.js à charger AVANT jquery.min.js. Dans cet état, le menu ne serait pas développé en cliquant sur l'icône du menu.

Ensuite, j'ai changé l'ordre pour que bootstrap.min.js vienne après jquery.min.js, ce qui a résolu le problème. Je ne connais pas suffisamment le langage javascript pour expliquer pourquoi le problème (ou le résoudre) a été causé, mais c'est ce qui a fonctionné pour moi.

Information additionnelle:

Les deux scripts sont situés au bas de la page, juste avant la balise . Les deux scripts sont hébergés sur des CDN, pas hébergés localement.

Si vous êtes sûr que votre code est correct, essayez-le.

48
Randy Greencorn

Dans <body>, vous devriez avoir deux balises <script>:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>

Le premier chargera jQuery à partir du CDN et le second chargera le code Javascript de Bootstrap à partir d'un répertoire local (dans ce cas, il s'agit d'un répertoire appelé js).

14
Farhad

Eh bien, j’ai eu le même problème quand j’ai ajouté le code suivant dans la balisemy problème résolu:

    <head>
       <meta name="viewport" content="width=device-width , initial-scale=1" />
    </head>

J'espère que cela peut vous aider les gars!

2
mohammad talaie

C'est ce qui m'est arrivé. J'ai utilisé le fichier jquery.min.js téléchargé à partir du site bootstrapit ne fonctionne pas. J'ai essayé la même page avec un autre fichier jquery.min.js, mais cela a bien fonctionné. Si vous rencontrez ce problème, essayez de faire référence autre fichier jquery.min.js dans votre page et essayez à nouveau 

0
Ahmed Walaa Eldin

Dans mon cas, le problème était dû à la façon dont je construisais ma barre de navigation. Je le faisais via un plugin jQuery afin de pouvoir construire rapidement des composants Bootstrap via javascript.

Pour raccourcir une longue histoire, la liaison des éléments de données du bouton via jQuery .data () a abouti à un bouton de réduction qui ne fonctionnait pas. Le faire via .attr () a résolu le problème.

Cela ne marche pas:

$this.addClass("navbar navbar-default")
  .append($("<div />").addClass("container-fluid")
    .append($("<div />").addClass("navbar-header")
      .append($("<button />").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .data("target","#" + id)
        .data("toggle","collapse")
        .html("<span class='sr-only'>Toggle navigation</span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"))
        .append($("<a href='#' />").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Mais ceci fait (avec les modifications laissées dans les commentaires):

$this.addClass("navbar navbar-default")
  .append($("<div />").addClass("container-fluid")
    .append($("<div />").addClass("navbar-header")
      .append($("<button />").addClass("navbar-toggle collapsed")
        .attr("type","button")
        .attr("aria-expanded", "false")
        .attr("data-target", "#" + id) //.data("target","#" + id)
        .attr("data-toggle", "collapse") // .data("toggle","collapse")
        .html("<span class='sr-only'>Toggle navigation</span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"
            + "<span class='icon-bar'></span>"))
        .append($("<a href='#' />").addClass("navbar-brand")
          .append(document.createTextNode(settings.label))))
    .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Je peux seulement supposer que cela est lié à la façon dont jQuery lie .data (), il n'écrit pas les attributs sur les éléments, mais les attache simplement à l'objet jQuery. L'utilisation de la version .data () a généré HTML:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >

Où la version .attr () donne:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">

Il semble que Bootstrap ait besoin de l'attribut data-nnn dans le code HTML.

0
Morvael

Juste mes 2 cents, avait:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

à la fin du corps, cela ne fonctionnait pas, il fallait ajouter crossorigin="anonymous" et maintenant ça marche, Bootstrap version 3.3.6. ...

0
krsnik93